Minification removes whitespace, comments, and shortens variable names in CSS, JavaScript, and HTML files. This reduces file size without affecting functionality.
What minification removes
- Whitespace and line breaks
- Code comments
- Unused code (dead code)
- Long variable names (renamed)
- Semicolons (where optional)
Before and after example
// Before minification
function calculateTotal(items) {
let total = 0;
for (const item of items) {
total += item.price;
}
return total;
}
// After minification
function calculateTotal(t){let e=0;for(const l of t)e+=l.price;return e}
Minification tools
- JavaScript: Terser, UglifyJS, esbuild
- CSS: cssnano, clean-css
- HTML: html-minifier
Minification in build tools
Most bundlers include minification:
- Webpack (TerserPlugin)
- Vite (built-in)
- Next.js (automatic)
Impact on performance
Minification typically reduces file sizes by 30-50%, improving:
- Download time
- Parse time
- Time to First Byte
Related Terms
Code Splitting
A technique that breaks JavaScript bundles into smaller chunks that can be loaded on demand, improving initial page load performance.
Critical Rendering Path
The sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen.
JavaScript Execution Time
The time the browser spends parsing, compiling, and executing JavaScript code, which can block the main thread and delay interactivity.
Render Blocking
Resources that prevent the browser from rendering page content until they are fully downloaded and processed.