webpack: Tree shaking not working with webpack 4.5

@zhongds I follow the Tree Shaking guide document and do exactly what it inform. My code work like a charm without UglifyJsPlugin.

@sokra It is only enable in production mode via a plugin or something internal? Want to document it in Tree shaking guide https://webpack.js.org/guides/tree-shaking/

For mine I do this:

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

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

@GuillaumeCisco tree shaking does not work in development mode per the docs here

@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.

🎉 🎉 🎉

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…

@hanyulo like a charm ? So you solved your problem?

`“@babel/core”: “^7.0.0-rc.1”,

"@babel/preset-env": "^7.0.0-rc.1",

"@babel/preset-react": "^7.0.0-rc.1",

"babel-core": "^6.26.3",

"babel-loader": "^8.0.0-beta.4",

"babel-plugin-import": "^1.8.0",

"babel-preset-env": "^1.7.0",`

with these devDependencies, how should i set my .babelrc { "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ], "@babel/preset-react" ] }

For mine I do this: { “presets”: [“env”, { “modules”: false }] } – @AndrewSouthpaw

Thanks for this hint! I was facing the same problem and setting modules to false in my .babelrc did fix it!

webpack: 4.5.0. I also have the same problem. webpack --mode production take effects, but when I use mode in webpack.config.js, tree-shaking do not work (I had setted sideEffects on package.json).

I followed the steps in Tree Shaking Documentation:

• Use ES2015 module syntax (i.e. import and export).
• Add a “sideEffects” entry to your project’s package.json file.
• Include a minifier that supports dead code removal (e.g. the UglifyJSPlugin).

what’s the problem? @Legends

Tried your repo @cdhgee and it works fine. Note that tree shaking is only enabled in production mode:

$ npm run build -- --mode production --display-used-exports
Hash: c665586af0bb888f4551
Version: webpack 4.5.0
Time: 529ms
Built at: 2018-4-9 09:46:10
    Asset       Size  Chunks             Chunk Names
bundle.js  599 bytes       0  [emitted]  main
Entrypoint main = bundle.js
   [0] ./index.js + 1 modules 264 bytes {0} [built]
       | ./index.js 48 bytes [built]
       | ./another-module.js 216 bytes [built]
       |    [only some exports used: a]