Minification

Why It Matters

Smaller files arrive sooner, and on a page held up by a render-blocking stylesheet that difference is visible rather than theoretical. Minification stacks with transport compression instead of competing with it: a 300 KB script might minify to 120 KB and then travel as roughly 38 KB once gzip compression has done its work, where the unminified original would have been near 70 KB on the wire. That is a saving on every request from every visitor, paid for once at build time. It also has a quiet security benefit, since comments in source files have a habit of containing internal URLs and the odd stray credential. What it does not do is make slow code fast — it only makes the download shorter.

How It Works

A minifier parses the file properly rather than running text substitutions, builds a syntax tree, and prints that tree back with the shortest legal formatting. Terser and esbuild handle JavaScript, cssnano and Lightning CSS handle stylesheets, and html-minifier trims markup. Renaming is confined to local scope, because anything reachable from outside the file, such as a global function or a CSS class name used in the HTML, has to keep its name. A source map is written alongside, referenced by a comment at the end of the file, mapping each minified position back to a line and column in the original. The build step then writes the result into the output folder under its hashed filename, and only that folder is uploaded.

Real-World Example

Common Mistakes

• ✕Shipping the development build because it was the one already sitting in the folder — no minification, no tree shaking, and often three times the necessary bytes
• ✕Uploading without the source maps and then trying to debug a live error from single-letter variable names
• ✕Minifying HTML that depends on whitespace between inline elements — words run together and layouts shift, because that whitespace was doing visible work

Related Terms