Shrinking Your bundle.js — Part 2: UglifyJSPlugin

Thomas James Byers
Dec 17, 2016 · 1 min read
  • 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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade