Code minification and compression are distinct but complementary optimization techniques, and understanding how each works reveals the layered approach modern web applications use to minimize file sizes and maximize performance.

Minification operates at the source code level, removing characters that are meaningful to humans but irrelevant to interpreters and compilers. Basic minification strips whitespace, newlines, and comments. Advanced JavaScript minifiers go further: they shorten local variable names (a process called "mangling"), remove unreachable code (dead code elimination), inline simple functions, fold constant expressions at build time, and convert property access patterns to shorter equivalents. For example, a minifier might replace `object["property"]` with `object.property` (saving 2 bytes) or convert `true` to `!0` (saving 2 bytes). These transformations require understanding the language's Abstract Syntax Tree (AST) — the hierarchical representation of code structure that compilers use internally.

AST-based minification works by parsing source code into a tree structure, applying transformations to tree nodes, and then regenerating source code from the modified tree. Tools like Terser (the successor to UglifyJS and the default JavaScript minifier in webpack) parse JavaScript into an AST using a full JavaScript parser, apply dozens of optimization passes, and emit minimal code. This is fundamentally different from naive text-based minification that simply removes whitespace — AST-based tools understand scope, variable references, and control flow, enabling safe transformations that text processing cannot achieve.

Tree shaking, a related optimization, eliminates unused exports from JavaScript modules. The term was popularized by Rich Harris (creator of Rollup and Svelte) and works by analyzing the static import/export graph of ES modules to determine which exported values are actually imported elsewhere. Code that is exported but never imported can be safely removed. Tree shaking depends on ES module syntax (import/export) because CommonJS (require/module.exports) is dynamically resolved at runtime, making static analysis impossible.

Compression algorithms like gzip (used since HTTP/1.1) and Brotli (developed by Google and standardized in RFC 7932) operate at the byte level, finding repeated patterns and encoding them efficiently using techniques like LZ77 sliding window compression and Huffman coding. Brotli achieves 15-25% better compression than gzip for text content because it includes a built-in dictionary of common web content strings (HTML tags, CSS properties, JavaScript keywords), allowing it to compress these frequent patterns more efficiently. Importantly, minification and compression are complementary: minified code compresses well because removing comments and standardizing variable names increases the ratio of repeated patterns.

Modern bundlers like webpack, Rollup, Vite, and esbuild combine multiple optimization strategies: module bundling (combining files to reduce HTTP requests), tree shaking (removing unused code), minification (shortening code), code splitting (creating separate bundles loaded on demand), and source map generation (enabling debugging of minified code in production). Understanding this pipeline helps developers make informed decisions about build configuration and performance optimization.