Tree shaking not working with webpack 4.5

Do you want to request a feature or report a bug?

I’d like to report a bug

What is the current behavior?

Tree shaking does not appear to be working. Dead code should be identified in the output bundle with a comment such as

/* unused harmony export _functionname_ */

If the current behavior is a bug, please provide the steps to reproduce.

Refer to the basic configuration in https://github.com/cdhgee/webpack-tree-shaking.

  1. Run npm install
  2. Run npm run build
  3. Examine the output in dist/bundle.js. Around line 83, the exports from another-module.js should be shown.

What is the expected behavior?

Functions c and d are not used anywhere in the project and should be identified with a comment such as

/* unused harmony export c */

Because these comments are missing, I conclude that either (a) tree shaking is not running, or (b) tree shaking is running but is not identifying c and d as dead code.

If this is a feature request, what is motivation or use case for changing the behavior?

n/a

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.

NodeJS version: 9.11.1 (64-bit)
Webpack version: 4.5.0
OS: Windows 10 1709 (64-bit)

These versions are all the most recent available as of today (2018-04-08).

Author: Fantashit

7 thoughts on “Tree shaking not working with webpack 4.5

  1. Also, check if you’re using babel-loader. That was my problem, it was transpiling ES6 modules into CommonJS, thus breaking tree shaking. It could be fixed by passing in { modules: false } into your babelrc, but depending on how you bundle your code that may break older browsers that don’t support ES6 modules..

  2. For mine I do this:

    { "presets": ["env", { "modules": false }] }
    

    (Note that the env preset is in a tuple with the options object.)

  3. @webpack/documentation-team the updated Tree Shaking instructions worked perfectly for me, big thanks to whoever did that update!

    In my case, I had a linked npm package containing some big modules that should’ve been shook as they weren’t used. Adding "sideEffects": false to the package’s package.json file cut the production build size for the main project in half (shaved hundreds of kbs). Double checked the build stats on webpack visualizer and tested the output bundles.

    🎉 🎉 🎉

Comments are closed.