Shrinking Your bundle.js — Part 2: UglifyJSPlugin
- Potential gain: ~30% reduction in bundle size
- Time required: 5 minutes
- Difficulty: easy
What Is It
UglifyJsPlugin is a Webpack plugin that minifies your Javscript, removing whitespace and renaming variables. This will inevitably make debugging harder so only do it on your production build.
For me this lead to more than a 30% reduction in bundle size.
How To Do It
Add the UglifyJsPlugin to the plugins section of your Webpack config. It already comes with Webpack so there’s no need to install anything from npm.
By default UglyifyJsPlugin will warn you about things such as deleting unreachable code. Unless you are experiencing problems, you probably don’t want to see these warning on every build so there’s an option to turn them off.
And that’s it! Just run your build and enjoy a smaller bundle.