Make UglifyJS way faster by using it sooner

  1. Read the many small files
  2. Lump them into a few big files
  3. Minify the big files

Adding Code Compounds Minify Wait Times

Here’s how a minifier works:

  1. It parses a JavaScript file into an Abstract Syntax Tree, or AST. (The AST is the in-memory representation browsers will use when they eventually run the code.)
  2. It modifies the AST without changing logic. Basically: it renames long variables like myTemporaryVariable to t. (There are other techniques that can shorten code a tiny bit more.)
  3. It outputs the AST as tersely as it can. For instance: it prints emptiness instead of comments; it doesn’t print extra spaces; and it writes !0 instead of true to save two bytes.

Breaking The Cache

What if you change one character in just one of your many small JavaScript files?

Minify Sooner

Bundlers should do this:

  1. Read the many small files
  2. Minify them, one at a time
  3. Lump them into a few bigger files

Today’s Solutions

My test bundle ran using uglify-loader in Webpack, on real code. In Overview, a JavaScript-heavy website, I sped JavaScript build by about 50% and removed “development” (un-minified) versions of JavaScript code. In Overview’s development mode, recompiling after changing one file costs 400ms: fast enough that I haven’t bothered optimizing.



Journalist, ex software engineer

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
Adam Hooper

Adam Hooper

Journalist, ex software engineer