[Webpack 2] Tree Shaking with Webpack 2

The less code you can send to the browser, the better. The concept of the tree shaking basically says so if you ' re not using some piece of code, then exclude it from the final bun Dle, even when that piece of code was exported from a module. Because ES6 modules is statically analyzable, Webpack can determine which of your dependencies is used and which is 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 is used and which is not. Bable is transpiling we ES6 module exports into common JS exports. Because this was 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 would include it even though it's not on use.  We ' re going to use a different bable preset, which excludes the transpilation of ES6 modules and leave so to Webpack. Install

Install babel-preset-es2015-webpack--save-dev

. Babelrc:change ' es2015 to ' es2015-webpack '

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

So is if you had a function unused anywhere in the project, but still get exported from the file. Then Webpack would mark it and when minify the file, this function would be is remove from the source.

[Webpack 2] Tree Shaking with Webpack 2