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

Question

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.

Wang Liang · Accepted Answer · 2021-03-21 21:55:35Z

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)()})(); ^^^^^^^^^^^

Joshua Blevins · Accepted Answer · 2020-12-20 03:33:21Z

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 :).

This answer is incorrect. babel-plugin-import will transpile ESM to CJS, but for tree-shaking you will need the former to get static-analysis.

Fasid Mpm · Accepted Answer · 2019-10-15 08:26:52Z

3

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

answered Oct 15, 2019 at 8:26

Fasid Mpm

5577 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related