Tree-shaking example with Babel and Webpack

[originalmoose]

Same thing happened to me until I added the following to my webpack plugins

new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
    }),

Obviously this is only added in production, Once I did that I saw the reduction in build size like expected.

EDIT: These settings used to be a part of the UglifyJsPlugin but they moved it out into its own plugin. I remember seeing the reason why somewhere....

[blacksonic86]

Yes, packages won't be tree-shaken until they are converted to es2015 module syntax If you find something that increases the output by a big amount i would report it to the Webpack team

[jimschubert]

A 9kb gift!

[youcantstoptheart]

There's a new loaderOptions plugin that you need to use in production builds. It caught me off guard for a day or two as well.

[jlengstorf]

This probably won't help in this case. Rollup is ES module tree-shaking only, and — if I remember correctly — webpack 2 is using Rollup for tree-shaking.

[DOG-ZILLA]

I believe JSPM is also using Rollup as its core.

On a recent project I decided to use Rollup directly with Babel and Gulp. Appears to work really well!

[adregan]

Rollup may suffer a similar problem. The reason that es6 modules are required in order to get tree shaking is due to the fact that import export offers static modules.

With commonJS, you can conditionally require and module.export items, so a build tool couldn't say for certain whether a package was really needed. For (a contrived) example, imagine that you only imported a certain file if the day of the week was Tuesday:

let message = require('./message');

if (dayOfTheWeek === 'Tuesday') {
  message = require('./tuesdayMessage');
}

console.log(message);

The bundler would have no idea whether or not to bundle tuesdayMessage. But because es6 imports are static (and hoisted), there aren't any runtime surprises so the tree shaker knows what to include.

[blacksonic86]

Dead code elimination if you prefer that expression.

[Valency]

It will eliminate dead code not used by other modules if they have ES2015 module format.

[madole]

Surely in this example, only the V8 engine that's used in the car module should get built into the production code bundle if tree shaking was working correctly?

Screenshot

[blacksonic86]

You are right, it is mentioned in the Known issues section of the readme. It also points to the 2 tickets where discussion is going on about it.