Minification

Minification is the process of removing all unnecessary characters from source code files without changing their functionality. This includes stripping whitespace, line breaks, comments, and shortening variable names in JavaScript, all of which are useful during development for readability but add file size that browsers do not need. A 100 KB JavaScript file can often be reduced to 40-60 KB through minification alone, and the savings are even greater when combined with gzip or Brotli compression during transfer.

The standard tools for minification vary by file type. For JavaScript, Terser is the dominant minifier, handling modern ES6+ syntax and supporting advanced optimizations like dead code elimination and scope hoisting. For CSS, cssnano and Lightning CSS are widely used, removing redundant rules, merging selectors, and shortening color values. HTML minification is less common but tools like html-minifier-terser can strip whitespace and remove optional closing tags. Modern build tools like Vite, Webpack, and esbuild handle minification as part of their production build pipeline, so developers rarely need to run minifiers manually.

Minification matters for web performance because every kilobyte of JavaScript, CSS, and HTML directly affects page load time, especially on mobile connections where bandwidth is constrained and parsing time is measurable. Smaller files download faster, parse faster, and execute faster. When combined with tree shaking, which removes unused code, and code splitting, which loads only the JavaScript needed for the current page, minification is part of a broader strategy for keeping bundle sizes lean. For any production website, shipping unminified code is essentially shipping debug builds to end users, wasting their bandwidth and your performance budget.