CODEWITHSUNDEEP
javascriptwebpack
branne
branne

Reputation: 101

how can I remove unused code when I build my bundle?

I am not sure how to organize my js code.
Our front end is customized to different customers. Majority of the base code is common across all customers. However there are cases where certain functionality is overridden for each customer.
For example if we have 2 functions Function1 and Function2.
Customer1 uses Function1 while Customer2 uses Function2. How can I make sure that when I build the code for Customer, Function2 will not be included in the bundle? And when I build the code for Customer2, then Function1 will not be included int he bundle?

The other option I have, and that I am trying to avoid, is to have a separate code repo for each customer.

Upvotes: 10

Views: 23165

Answers (3)

Wang Liang
Wang Liang

Reputation: 4434

At webpack configuration, optimization/usedExports: true will remove unused code.

webpack.config.js

module.exports = [
    {
        entry: "./main.js",
        output: {
            filename: "output.js"
        },
        optimization: {
            usedExports: true, // <- remove unused function
        }
    },
    {
        entry: "./main.js",
        output: {
            filename: "without.js"
        },
        optimization: {
            usedExports: false, // <- no remove unused function
        }
    }
];

lib.js

exports.usedFunction = () => {
    return 0;
};

exports.unusedFunction = () =>{
    return 1;
};

main.js

// Not working
// const lib = require("./lib"); 
// const usedFunction = lib.usedFunction;

// Working
const usedFunction = require("./lib").usedFunction;

usedFunction()
```shell
$ webpack

Generated Output file:
dist/output.js

(()=>{var r={451:(r,t)=>{t.W=()=>0}},t={};(0,function e(o){var n=t[o];if(void 0!==n)return n.exports;var p=t[o]={exports:{}};return r[o](p,p.exports,e),p.exports}(451).W)()})();

dist/without.js

(()=>{var n={451:(n,r)=>{r.usedFunction=()=>0,r.unusedFunction=()=>1}},r={};(0,function t(u){var e=r[u];if(void 0!==e)return e.exports;var o=r[u]={exports:{}};return n[u](o,o.exports,t),o.exports}(451).usedFunction)()})();
                           ^^^^^^^^^^^

Upvotes: 8

Joshua Blevins
Joshua Blevins

Reputation: 71

Tree shaking can be a stubborn process depending on how the library you are using in your application is developed.

If you find that you are using a module that does not shake dead code properly, you can always use the babel-plugin-import plugin. This plugin will build your bundle with only the code you import and nothing else. Here is an example of my babel 7.x config file. I use it to remove a lot of code that was not being tree-shaken by webpack from material-ui.

{
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/core",
        "libraryDirectory": "/",
        "camel2DashComponentName": false
      },
      "core"
    ],
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/icons",
        "libraryDirectory": "/",
        "camel2DashComponentName": false
      },
      "icons"
    ]
  ]
}

When using this plugin in certain libraries, some of your imports also may break and you may need to import certain things on their own. I had to do this with material-ui's makeStyles function.

Feel free to remove what is unnecessary to you and keep the parts that help :).

Upvotes: 4

Fasid Mpm
Fasid Mpm

Reputation: 557

I think what you need is Tree-Shaking in webpack.

Upvotes: 3

Related Questions