CODEWITHSUNDEEP
webpackuglifyjstree-shaking
ItsGeorge
ItsGeorge

Reputation: 2211

Tree shaking not working - webpack 4 and uglifyjs-webpack-plugin

I have tried adding UglifyJSPlugin to a webpack 4 project, in accordance with the webpack docs, and I'm still seeing dead code and even comments in my bundle which leads me to think that my uglify plugin config isn't being used.

Link to project

The docs state that "in order to take advantage of tree shaking, you must...
- Use ES2015 module syntax (i.e. import and export). done
- Add a "sideEffects" entry to your project's package.json file. done .
- Include a minifier that supports dead code removal (e.g. the UglifyJSPlugin)." done

Still, the unused/unimported leftpad function and comments are being included in my bundle.

All of the config can be seen here. Based on the results I'm seeing, I suspect that this is related to the uglify settings in my webpack config.

To reproduce, pull the repo and run yarn build

Upvotes: 10

Views: 1623

Answers (1)

apptaro
apptaro

Reputation: 289

tree shaking is only enabled in production mode

See https://github.com/webpack/webpack/issues/6992#issuecomment-379665061

This explanation is misleading, because not only UglifyJsPlugin but also a bunch of plugins are needed to make it work as explained here.

I have not tried enabling all the plugins to see if it works. I have tried "--optimize-minimize" option but it doesn't work.

Upvotes: 2

Related Questions