JavaScript Minifier

Shrinking JavaScript without changing what it does

A JavaScript minifier reduces file size by removing comments and whitespace and, unlike CSS, by renaming local variables to short names. A variable called itemCount inside a function can safely become a because nothing outside that scope refers to it. The code still runs the same; it just takes fewer characters to express.

This matters because JavaScript has a double cost: the bytes have to download, and then the engine has to parse and compile them. A smaller bundle improves both. On content-heavy pages the savings from renaming and dead-code removal can be substantial.

A real transformation

// Add tax to a price
function withTax(price, rate) {
  const total = price + price * rate;
  return total;
}

Minified, that becomes roughly:

function withTax(e,t){return e+e*t}

The comment is gone, the intermediate total variable is inlined, and the parameters are shortened. The function name stayed because it may be called from elsewhere. The behavior is identical: a price and a rate go in, a taxed total comes out.

Things that trip people up

Will minification break my code? Safe minifiers preserve behavior, but they assume valid JavaScript. Code that relies on reading a function or variable name as a string, or on non-standard tricks, can break. Keep your minified build covered by the same tests as your source.

Is minifying the same as obfuscating? No. Minifying aims for small size and renames variables as a side effect. Obfuscation deliberately makes code hard to read as a goal. Minified code is still fully functional and can be reverse-engineered; it is not a security measure.

Why ship a source map? Minified code is unreadable in the browser, so a source map lets dev tools map an error on line one, column five thousand back to the original file and line. Generate the map during your build and keep it out of the public bundle if you do not want to expose source.

For stylesheets, the companion step is the CSS minifier.