Minification removes unnecessary characters (whitespace, comments) from code to reduce file size. Bundling combines multiple files into fewer files to reduce HTTP requests. Both reduce load times - bundlers like webpack, Vite handle this automatically.
Minification:
Bundling:
Modern Bundlers:
Results:
// Before minification (readable)
function calculateTotal(items) {
// Calculate the sum of all item prices
const total = items.reduce((sum, item) => {
return sum + item.price;
}, 0);
return total;
}
// After minification (production)
function calculateTotal(t){return t.reduce((t,e)=>t+e.price,0)}
// Typical file size reduction:
// Original: 1.2 MB
// Minified: 450 KB (63% reduction)
// Gzipped: 120 KB (90% reduction)
// Common minification tools:
// - Terser (JavaScript)
// - cssnano (CSS)
// - html-minifier (HTML)