Tree shaking with Webpack 2
ES6 modules are statically analysable. This means webpack can predict which modules are used and which one are not.
It’s called tree shaking and can seriously reduce bundle sizes.
Shows that helpers exports a function addClass that is no longer used by any of the functions. Webpack converts ES6 modules to commonJS modules.
commonJS is not statically analysable. So Webpack cannot reliable tree shake this bundle.
We need to change the Babel so it doesn’t transpile ES6 modules and leaves to Webpack:
$npm install —-save-dev babel-preset-es2015-webpack Then open the .babelrc file find the
preset with “es2015” and change to es2015-webpack:presets: [“es2015-webpack”, “stage-2”],also need to remove the original preset from the package.json file.
Now
$ npm start and the helpers.js file is different. It’s webpack that transpiles the modules. Webpack marks addClass as not used. It’s still there, but when we run uglify it will automatically be removed (npm run build:prod).Tree shaking also applies to third-party dependencies.