Guides - Issues with Tree Shaking & Production

[jakearchibald]

I was trying to get tree shaking working. Here are a few notes about the tree shaking and production guides:

The article explains what tree shaking is (really well), but it doesn't really cover how to achieve it.

--optimize-minimize will do it, but that also throws in uglify, which can make it difficult to confirm if treeshaking has worked, and will throw errors if you're using ES2016+.

One of the guides should cover how to enable tree shaking without enabling other optimisations. This will help users confirm that code is being removed, without having to read minified code.

The production guide should cover how to avoid errors when using ES2016+, either by using the uglify harmony branch, or BabiliWebpackPlugin. None of the docs I've seen cover how to use BabiliWebpackPlugin instead of uglify while retaining tree shaking.

Tree shaking will break if using babel + the es2015 preset, as it transpiles the imports. I've filed babel/babel-loader#477, but it may be worth mentioning in the guide too.

[jakearchibald]

The production guide suggests:

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

…will perform tree-shaking, but that plugin appears to be deprecated, and doesn't appear to be handling tree-shaking.

[insin]

After playing about with this, it seems like Uglify is responsible for actually removing the unused code - Webpack's role in tree shaking appears to be avoiding generating __webpack_exports__[id] = whatever statements for unused exports so Uglify doesn't count them as "used" for the purposes of dead code elimination.

You can give UglifyJsPlugin {mangle: false} config to generate a build which makes it easier to confirm if code you expected to be removed has been.

[jakearchibald]

Yeah, it seems to behave that way. Babili does the same.

I guess the docs led me to think the code removal was performed by webpack.

[skipjack]

After playing about with this, it seems like Uglify is responsible for actually removing the unused code - Webpack's role in tree shaking appears to be avoiding generating webpack_exports[id] = whatever statements for unused exports so Uglify doesn't count them as "used" for the purposes of dead code elimination.

@insin @jakearchibald I've seen a few other discussions recently that all came to the same conclusion as well. Essentially it's the combination of ES6 static import / export statements and the UglifyJsPlugin that enable tree shaking from my understanding. A warning was added recently in #1474 that starts to clarify this but I'll elaborate on this and address the other things mentioned above in the rewrites.