Minifier

A minifier is a tool that transforms source code (JavaScript, CSS, HTML) into a functionally identical but much smaller version, by removing whitespace and comments and, for JavaScript, renaming local variables to short identifiers and applying safe syntactic shortcuts. The goal is purely transport and parse efficiency — it never changes what the code does, only how many bytes it takes to say it.

How it works

Whitespace and comments carry no meaning to a JS/CSS/HTML parser, so removing them is free size savings with zero risk. JavaScript minifiers go further, using an actual parser to build an AST (abstract syntax tree), then:

• Rename local variables and function parameters to single letters (safe only for names with function-local scope, not globals or object properties).
• Remove dead code the tool can prove is unreachable.
• Collapse some expressions into shorter equivalent forms.

Before:  function calculateTotal(itemPrice, taxRate) {
             return itemPrice + (itemPrice * taxRate);
         }

After:   function calculateTotal(e,t){return e+e*t}

Because the transformed code is unreadable for debugging, minifiers typically emit a source map alongside the output — a file mapping each position in the minified code back to its original source location, so browser dev tools can show a stack trace against the readable original even though the browser is running the minified version.

Common pitfalls

• Minifying code that relies on function or variable names at runtime (some dependency-injection patterns, or code that inspects Function.name) can break after variable renaming.
• Serving minified code without its matching source map makes production bugs far harder to diagnose from a stack trace or error report.
• Minification reduces raw size, but the size that matters for transfer is usually the gzip/brotli-compressed size — minifying and then checking only the raw byte count can be misleading, since compression already removes a lot of the redundancy minification targets.
• Aggressive minifier options that also apply optimizations beyond pure minification (dead-code elimination, inlining) can occasionally change behavior for code that relies on subtle JavaScript semantics — always test minified output, don't assume it's a no-op transform.

Related terms

• JSON — minified JSON (no whitespace between tokens) is functionally identical to pretty-printed JSON, the simplest possible example of minification.
• XML — can be minified the same way (stripping insignificant whitespace between tags), though it's less commonly done than with JS/CSS.

See also

• Tool: Bundle Size Estimator — paste JavaScript, CSS, or HTML to see its raw and estimated gzip size, useful for measuring what minification actually saves.