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

Question

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

Stuck....Where you able to fix this ? – Shivprasad Koirala Mar 27 '18 at 02:48 — Shivprasad Koirala, Mar 27 '18 at 02:48
What's the output of `webpack --verbose [...other opts]`? – Steven Kalt Jun 22 '18 at 15:35 — Steven Kalt, Jun 22 '18 at 15:35

score 2 · Accepted Answer · answered Jul 12 '18 at 14:03

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.

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

1 Answers1