What Is Minification? Code Compression for the Web
Minification is the process of removing all unnecessary characters from source code — whitespace, comments, long variable names — without changing its functionality. It reduces file sizes by 30–80%, directly improving page load speed and reducing bandwidth costs. Every major production website serves minified HTML, CSS, and JavaScript.
What Minification Removes
Whitespace and line breaks. Comments (// and /* */ in JS/CSS, <!-- --> in HTML). Unnecessary semicolons and brackets. Long variable names → short ones (a, b, c) — called mangling, done by JS minifiers like Terser and esbuild. Duplicate CSS rules. HTML attribute quotes when unambiguous. Minified code is intentionally unreadable; always serve sourcemaps for production debugging.
Minification vs Compression
Minification reduces the logical size of code before transmission. Compression (Gzip, Brotli) further reduces the transmitted bytes using lossless compression. They are complementary: minify first, then compress. Brotli achieves 15–25% better compression than Gzip at equivalent speeds on text. Modern web servers and CDNs apply Brotli/Gzip automatically to text-based responses.
Build Tools
JavaScript: esbuild (fastest), Terser, SWC. CSS: Lightning CSS, cssnano. HTML: html-minifier-terser. All major bundlers (Webpack, Vite, Rollup, Parcel) minify output automatically in production mode. Source maps (*.map files) are generated alongside minified files so DevTools can show the original source for debugging.