JavaScript minification is often confused with obfuscation, even though they're two different tasks with different goals: one saves bytes, the other makes the code's logic harder to understand.
What minification does
A minifier strips whitespace, comments, and line breaks, and shortens local variable names to one or two characters wherever that's safe. The program's logic stays completely unchanged — it's purely a technical compression of the file.
From JSMin to Terser: a short history
Douglas Crockford released JSMin in the early 2000s, one of the first widely used JS minifiers — it stripped whitespace and comments but left variable names untouched. Modern tools like Terser (a fork of UglifyJS), UglifyJS itself, and esbuild parse the code into an AST and go further: they rename local variables and function parameters to single letters wherever it's safe, which does more for file size than whitespace removal alone on any codebase of real size.
Source maps: how you debug code that's been renamed
Once variable names are down to a, b, and c and every line break is gone, a production stack trace points at an unreadable position inside one giant line. A source map solves that: it's a separate file mapping each position in the minified output back to its original line, column, and variable name, so browser DevTools can show a readable stack trace and let you set breakpoints in the original source even though the browser is actually running the minified file.
Why you'd need this
- Shrink a JS bundle's size before deploying to production.
- Speed up the script's download and parsing in the browser.
- Understand why minified code can still be read if you want to, while obfuscated code is much harder to make sense of.
Tree shaking versus minification
Tree shaking is a separate technique that shouldn't be confused with minification: it analyzes the module dependency graph and completely removes functions and exports that are never used anywhere from the final bundle, at build time. Minification, by contrast, works on already-finished code and only shortens its textual representation, without removing any logic that's actually executed. Modern bundlers like Vite or webpack typically apply both techniques in sequence: tree shaking removes dead code first, then minification compresses whatever remains.