Distinguish minification, compression (gzip/brotli), and bundling. Do they overlap, and what does each save?
Separating three often-conflated build/transfer optimizations and what layer each operates at.
They're three different reductions at different layers, and they stack. MINIFICATION rewrites the source itself: strip whitespace and comments, shorten local variable names, drop dead code — producing smaller but still-valid JS/CSS. It happens at build time and reduces the raw bytes before anything else touches them. COMPRESSION is applied by the server over the wire: gzip or (better) Brotli encode the response body, the browser sends Accept-Encoding and decompresses on arrival. Text compresses extremely well — often 70–90% smaller — because code is repetitive; Brotli generally beats gzip, especially with a high static-precompression level for assets you ship repeatedly. Minification and compression are complementary: minify first (removes structure a compressor can't recover), then compress the result. BUNDLING concatenates many modules into fewer files. Its historical win was cutting the number of HTTP requests, which mattered a lot under HTTP/1.1's connection limits; under HTTP/2+ (multiplexed requests) that matters less, so today bundling is more about enabling tree-shaking and avoiding waterfalls than about request count — and you balance it against code-splitting so you don't ship one giant bundle. Net: minify + Brotli are almost always pure wins; bundling is a tuning decision. Don't forget images/fonts are already compressed — re-gzipping them wastes CPU for ~0 gain, so exclude them.
Explaining a build pipeline; deciding what actually shrinks a bundle vs. what's server config.
Source: function addNumbers(first, second) { return first + second; } // 60B
Minified: function a(b,c){return b+c} // ~24B
+ Brotli: (binary, ~repetition-encoded across the whole file) // often 5-10x smaller
Layers, and where each runs:
Minification -> build time, rewrites the code
Compression -> server/CDN, encodes the response body (gzip/brotli)
Bundling -> build time, fewer files -> enables tree-shaking
Rule: minify THEN compress. Don't gzip already-compressed images/fonts.