How to use the JavaScript Minifier
- Paste your code, open a .js file, or click Load sample.
- Click Minify and choose the options: compress, mangle names, mangle top-level names, drop console calls and keep license comments.
- If a syntax error appears, click Go to error, fix the code, and the result updates automatically.
- Copy the result or download it as a .min.js file. To read minified code instead, click Beautify.
Features
- Real Terser minification: dead-code removal, constant folding and name mangling
- Options for top-level mangling, dropping console calls and keeping license comments
- Classic script or ES module mode, detected automatically
- Syntax errors shown with line, column and the offending code
- Beautify mode with indentation and brace style choices
- Original size, minified size and percentage saved
What a JavaScript minifier does
Minification makes a script smaller without changing what it does, so pages download and start faster. It works in three layers. First, comments, indentation and line breaks are removed. Second, compression rewrites code into shorter equivalents: it folds constant expressions, removes code that can never run and joins consecutive statements. Third, mangling renames local variables and function parameters to one or two letters, because names like subtotal mean nothing to the JavaScript engine. This tool uses Terser, the minifier built into many popular bundlers, so the output matches what a production build would produce.
Compression and mangling by example
| Before | After | What happened |
|---|---|---|
if (false) { debugger; } | (removed) | Unreachable code is dropped |
var unused = 0; inside a function | (removed) | A variable that is never read is dropped |
return (a + b); | return a+b | Redundant parentheses and spaces go |
function (items, taxRate) | function(t,n) | Local names are mangled |
console.log(x); | (removed) | Only with Drop console.* calls ticked |
Why top-level names are kept by default
In a classic script, functions and variables declared at the top level become globals that other scripts on the page, or inline onclick handlers, may call by name. Renaming or removing them would break those callers, so Terser leaves them alone unless you tick Mangle top-level names. Only do that for self-contained code, such as a bundle wrapped in a function. ES modules are different: their top-level names are private to the module, so Terser can rename them safely and only exported names are kept.
Scripts versus modules
Code that uses import or export is an ES module. Modules always run in strict mode and are parsed with slightly different rules, so the minifier needs to know which kind it is reading. Auto-detect looks for import and export statements; choose the type yourself if detection guesses wrong.
Output syntax and older browsers
The newest syntax allowed setting stops Terser from introducing newer constructs. For example, with ES2015 or later it may turn a short function into an arrow function. It does not rewrite modern code into older syntax; if your source already uses arrow functions and you need to support very old browsers, run it through a transpiler such as Babel first.
License comments
Open-source licenses often require that the copyright notice stays with the code. Terser recognizes comments that start with /*! or contain @license or @preserve, and keeps them when Keep license comments is ticked. Every other comment is removed.
Reading minified code
When you need to understand a minified file, such as a third-party widget or a production bug, Beautify mode re-indents it with one statement per line. Mangled names cannot be recovered, but the structure becomes readable. For your own code, generate source maps in your build so browser developer tools can show the original. Minify your stylesheets and markup too with the CSS Minifier and the HTML Formatter.
Frequently asked questions
Is Terser the same as UglifyJS?
Terser began as a fork of uglify-es and works the same way, but it is actively maintained and understands modern JavaScript syntax such as classes, async functions and optional chaining.
Will the minified code behave exactly the same?
For valid code, yes. The exceptions are code that depends on function names (fn.name) or on the source text of functions (fn.toString()), since mangling changes both. Scopes that use eval or with are not mangled.
Can I minify TypeScript or JSX?
Not directly. Compile TypeScript or JSX to plain JavaScript first with your build tool, then minify the output.
Why did my console.log calls disappear?
“Drop console.* calls” is ticked. Untick it to keep logging in the minified output.
Is my code uploaded to a server?
No. Terser runs inside your browser, so proprietary code never leaves your computer.