What Terser does to your code
This page runs Terser (version 5), the minifier behind webpack, Vite and many other build tools. Unlike a whitespace stripper, Terser parses your code into an abstract syntax tree, transforms the tree, and prints it again in the shortest form it can find. The page exposes two switches, which map to Terser's mangle and compress options; every other option stays at its default.
| Switch | What it does |
|---|---|
| Always on | Whitespace and line breaks go, semicolons and braces are dropped where optional, string quotes switch to the shorter style, and comments are removed except those beginning with /*! or containing @license or @preserve. |
| Mangle | Renames local variables and function parameters to one or two letters. |
| Compress | Rewrites code to be smaller: removes unreachable branches such as if (false), inlines variables that are used once, and folds constants. |
Worked example
This 152-byte function:
function greet(name) {
const message = 'Hello, ' + name + '!';
if (false) { console.log('never'); }
return message;
}
console.log(greet('world'));gives these results with each setting.
| Mangle | Compress | Bytes | Output |
|---|---|---|---|
| on | on | 68 | function greet(e){return"Hello, "+e+"!"}console.log(greet("world")); |
| off | on | 74 | Same, but the parameter is still called name |
| on | off | 110 | Keeps the message variable (renamed to o) and the dead if (false) block |
| off | off | 128 | Whitespace stripped only |
With both options on, that is a 55% saving.
What it will not do
- Top-level names are not mangled or removed. The default Terser setting treats top-level variables as possibly used by other scripts, so a global
var topor an unusedconst unused = 1in the pasted code both survive. Wrap your code in a function or module if you want those names shortened. - Property names are never renamed.
obj.longPropertyNamestays as written, which keeps output safe for code that reads properties from JSON. - No source map is produced. The page outputs only the minified code, so debugging in production will show mangled names. Keep your original file.
- Modern syntax is accepted. Terser reads current ECMAScript syntax, but it does not transpile it, so arrow functions and optional chaining stay as written.
- Comments with a licence tag are kept on purpose. Add
/*! ... */if your licence requires an attribution line to ship.
Errors
If the code does not parse, nothing is output and the Terser message is shown, for example "Name expected" for let = ;. The message is shown on its own, without a line number. Fix the syntax, then try again.
The Input and Output figures are measured in bytes, and the saving does not account for gzip or Brotli on the server. For the stylesheet and markup side of the same job, use the CSS minifier and HTML minifier.