Shrinking Your bundle.js — Part 2: UglifyJSPlugin

  • 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.

--

--

--

Javascript Developer — Manchester

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thomas James Byers

Thomas James Byers

Javascript Developer — Manchester

More from Medium

Countdown in Reactjs From Event’s Timezone and Date

#1 What is React and How it works — Learn React Series

Cookies are not easy to eat

How to set up prettier in less than 2 minutes