Minify JavaScript with Terser to ship fewer bytes, or beautify minified code to read it. Syntax errors are shown by line and column, and nothing leaves your browser.
How to use it
- Paste your JavaScript or open a .js file.
- Choose Minify and its options, or Beautify with your indent and brace style.
- Copy the result or download it as script.min.js or script.js.
Minify options
- Shorten variable names renames local variables and parameters to one or two letters.
- Compress rewrites code to a shorter equivalent: folds constants, drops unreachable code and joins statements.
- Remove console calls takes out
console.log and the rest, for production builds. - Keep /*! licence */ comments keeps the licence notes that most open-source code must carry.
Example
The cart total function loaded above takes 344 bytes. Minified it takes 193 bytes (44% smaller):
function cartTotal(t,o){let n=0;for(const o of t)n+=o.price*o.quantity;const c=n*o;return Math.round(100*(n+c))/100}console.log(cartTotal([{price:499,quantity:2},{price:99.5,quantity:1}],.18));
The comment and spaces are gone, items, taxRate and subtotal became t, o and n, and 0.18 became .18. The function keeps its name, cartTotal, because this is a plain script and other code may call it.
Minifying uses the open-source Terser (BSD licence), the syntax check Acorn (MIT) and beautifying js-beautify (MIT). The same engine runs our HTML formatter and CSS minifier.
Frequently asked questions
Will minifying break my code?
Terser keeps what the code does. In a plain script it doesn't rename top-level functions and variables, because other scripts on the page may use them; in an ES module (a file with import or export) it can, since those names are private to the file. Code that reads its own function names, or uses eval or with, can still behave differently, so test the minified file before you ship it.
Can it un-minify code?
Beautify restores line breaks and indentation, which makes minified code readable again. It can't bring back the original variable names or comments: once a minifier renames userTotal to t, that name is gone.
Does it work with TypeScript or JSX?
The minifier and syntax check read standard modern JavaScript (classes, modules, async code and newer syntax), so compile TypeScript or JSX to JavaScript first. Beautify still lays out TypeScript and JSX reasonably well.
Is my code run or uploaded?
Neither. Your code is parsed as text in your browser tab: it isn't executed, and it isn't sent to a server.
Why does the minified code use commas instead of semicolons?
Joining statements with commas, as in return console.log(n),n, is one of Terser's compressions: it's shorter and does the same thing. Untick "Compress" to keep your statements as they are and only remove whitespace and shorten names.
