[Webpack 2] Tree shaking with Webpack 2

Posted 2020-07-28 Answer1215

The less code you can send to the browser, the better. The concept of tree shaking basically says that if you’re not using some piece of code, then exclude it from the final bundle, even when that piece of code is exported from a module. Because ES6 modules are statically analyzable, Webpack can determine which of your dependencies are used and which are not. In this lesson, see how to take advantage of this awesome feature in Webpack 2.

 

One of the aspects of ES6 modules is that they‘re statically analyzable. This means tools like Webpack can predict exactly which exports are used and which are not. 

Bable is transpiling our ES6 module exports into common JS exports. Because this is getting transpiled down to common JS, it‘s not statically analyzable like ES6 modules, and so, Webpack can‘t reliably treeshake this function, and our bundle will include it even though it‘s not in use.

 

We‘re going to use a different Bable preset, which excludes the transpilation of ES6 modules and leave that to Webpack.

 

 

install:

npm install babel-preset-es2015-webpack --save-dev

 

.babelrc: change ‘es2015 to ‘es2015-webpack‘

 "presets": ["es2015-webpack", "stage-2"],

 

So now if you have a function unused anywhere in the project, but still get exported from the file. Then webpack will mark it and when minify the file, this function will be remove from the source.