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.

plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false        
      }
    })
]

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.

• Part 1: react-lite
• Full Series