How the JavaScript minifier works
This page uses Terser (version 5.31.6), the same minifier many JavaScript build tools rely on, loaded into your browser. Terser does not search and replace text. It parses your code into a syntax tree, transforms the tree, and prints it back out. The page runs it with three settings:
- compress: simplifies code, for example
false becomes !1, unused local variables and unreachable branches are dropped, and debugger statements are removed.
- mangle: renames local variables and function parameters to short names. Top-level names and object property names are not renamed.
- comments: false: removes every comment from the output.
Because Terser has to parse the code first, invalid JavaScript produces an error instead of output. The message appears in red under the toolbar, for example Minification error: Unexpected token: punc (:). That makes this page a handy quick syntax check as well.
Worked example
/*! MyLib v1.2 | MIT */
// Debounce helper
function debounce(callback, waitMs) {
let timerId = null;
return function (...args) {
clearTimeout(timerId);
timerId = setTimeout(() => callback.apply(this, args), waitMs);
};
}
const DEBUG = false;
if (DEBUG) {
console.log('debug mode');
}
window.debounce = debounce;
Output:
function debounce(e,n){let o=null;return function(...t){clearTimeout(o),o=setTimeout((()=>e.apply(this,t)),n)}}const DEBUG=!1;window.debounce=debounce;
Several things happened. callback, waitMs, timerId, and args were renamed because they are local. debounce and DEBUG kept their names because they are top-level and other scripts might use them. The if (DEBUG) block was removed entirely, because Terser can see that a const set to false never runs it. Two statements were joined with a comma. Both comments were removed, including the license banner.
Pitfalls to check before you deploy
Code that relies on function or class names
function createWidget() {
function Widget() {}
return Widget.name;
}
The original returns "Widget". After minification the inner function is renamed or made anonymous, and the function returns an empty string. Logging, dependency injection, and serialization code that reads Function.name or constructor.name breaks this way. Store the name in a string, or define the function at the top level.
Semicolon traps are preserved, and can become invisible
Terser applies automatic semicolon insertion exactly as a browser does, so it will not create a new ASI bug the way a naive line-joining minifier can. But it keeps the bug you already have, and the minified result can hide it:
function status() {
return
{ ok: true };
}
JavaScript inserts a semicolon after return, so this function returns undefined. Terser sees the object as unreachable and deletes it, leaving function status(){}. If a function looks empty after minifying, check for a line break after return.
License comments
All comments are removed, including /*! ... */ banners. Paste required notices back at the top of the output.
Syntax Terser does not accept
JSX (<div/>) and TypeScript annotations (let a: number) are not JavaScript, so they fail with an "Unexpected token" error. Compile them to plain JavaScript first. ES modules are fine: import and export are kept, and exported names are never renamed.
Limitations
- No source map is generated.
- Property names are not mangled, so code built around large objects shrinks less than code built around local variables.
- The error message names the unexpected token but not its line number. Beautify the code first if you need to find it.
- Scopes that use
eval or with are not mangled, because Terser cannot know which names they reference.
When to use a different tool
Frequently asked questions
Is Terser minification safe for my code?
For standard JavaScript it is designed to keep behavior the same, because it parses the code into a syntax tree before changing it. The usual exceptions are code that reads function or class names at runtime (Function.name, constructor.name), code that inspects its own source with toString(), and code that depends on unreachable statements. Test the minified file before you deploy it.
Does it remove console.log calls?
No. console.log and other console calls are kept. Terser can drop them with its drop_console option, but this page does not enable it. debugger statements are removed.
Why are my global function names not shortened?
Top-level names can be used by other scripts on the page, so Terser leaves them unchanged unless top-level mangling is turned on, which this page does not do. Wrap your code in a function, for example an immediately invoked function expression, if you want those names shortened.
Are license comments kept?
No. This page removes all comments, including /*! banners and @license notes. If your license requires the notice, paste it back at the top of the minified output.
Does the tool generate a source map?
No. Only the minified code is produced. If you need a source map for debugging in production, run Terser in your build with its sourceMap option.
Is my JavaScript sent to a server?
No. Terser runs in your browser. The input editor keeps a copy in your browser local storage so it survives a reload, and Clear removes it.