What does the JavaScript minifier do?
The JavaScript Minifier takes a script and gives back the smallest version that still does the same thing. It strips whitespace and comments, rewrites expressions into shorter equivalents, drops code that can never run, and shortens local variable names. The result shows up as you type. There's no Minify button, no upload and no account.
Press Sample and you get a 757-byte script: a license header, two helper functions with comments, a console.log and a loop over the page's price tags. The stats line under it reads:
757 B → 419 B · 45% smaller · 295 B gzipped
Three numbers, three meanings. 757 B is what you pasted. 419 B is the minified file. 295 B is what that file weighs after gzip, which is roughly what a visitor's browser actually downloads. The license line /*! Price tools v1.2 | MIT License */ is still at the top, because the license asks you to keep it there.
To minify JavaScript here, you paste it and read. The work runs in a background thread inside your tab. Your code is parsed, never run, and never sent to a server. The input limit is 5 MB of source.
When you'll use a JavaScript minifier
Big projects already minify JavaScript. Their bundler does it on every build, and nobody thinks about it. A JavaScript minifier you open in a browser is for the code that lives outside a build.
A snippet for someone else's page. A chat widget, a tracking snippet, a pricing calculator you paste into a CMS embed box. Those boxes often have size limits, and every byte loads on every page view.
A bookmarklet. A bookmarklet is a whole program squeezed into a URL. Shorter code fits more places and is easier to share.
One file you'd rather not build a toolchain for. Setting up a bundler, a config file and a dozen dependencies to shrink one 4 KB script is a lot of ceremony. Paste it here, copy the result, ship it.
Checking what a minifier will do to your code. Maybe your build minifies and something broke in production but not in development. Paste the suspicious function and see exactly what comes out.
The usual alternative is a minifier page that posts your source to its server, makes you click a button and wait, and wraps the result in ads. Some put the share link behind a login. The JavaScript Minifier does the job in the tab you're already in, with nothing to sign up for and no daily limit. It works the same for a freelancer shipping one client's embed, a student learning what minified code looks like, and an engineer at a large company who needs a quick answer without opening a ticket.
How the JavaScript minifier works
Under the hood is terser 5.48, the open-source minifier behind many JavaScript build tools. It reads your code into a syntax tree, rewrites the tree, then prints it back out with no wasted characters. Because it works on the tree and not on the text, it knows the difference between a variable and the same word inside a string.
Here's what it does to real inputs, with the default settings:
| You paste | You get | What happened |
|---|---|---|
var secondsPerDay = 60 * 60 * 24; | var secondsPerDay=86400; | The math is done once, now, instead of on every page load. |
var ready = true;var done = false; | var ready=!0,done=!1; | !0 is true in two characters. Two declarations merge into one. |
function pick(debug) { if (debug) { return 'verbose'; } else { return 'quiet'; } } | function pick(e){return e?"verbose":"quiet"} | An if/else that returns becomes a ternary. The parameter is renamed. |
function check(x) { if (false) { alert('never'); } return x; } | function check(c){return c} | A block that can never run is removed. |
function isMissing(value) { return value === undefined; } | function isMissing(i){return void 0===i} | void 0 is always undefined and can't be shadowed. |
Notice what didn't change: pick, check and isMissing keep their names. The minifier never renames anything at the top level of your script. People call those functions from HTML, like onclick="pick(true)", or from another script on the same page. Renaming them would give you a smaller file that breaks the page, which is the worst trade a minifier can make. Local variables and parameters are fair game, because nothing outside the function can see them.
Three checkboxes control the rest. Shorten variable names (on by default) does the renaming. Keep license comments (on) keeps comments that start with /*! or contain @license or @preserve. Remove console.* calls (off) deletes your debug logging.
What each setting saves on a real script
Here is the same 757-byte Sample script run with each setting changed on its own. Its gzipped size before minifying is 413 B.
| Settings | Minified | Smaller by | Gzipped |
|---|---|---|---|
| Defaults | 419 B | 45% | 295 B |
| Shorten variable names off | 520 B | 31% | 321 B |
| Keep license comments off | 381 B | 50% | 267 B |
| Remove console.* calls on | 380 B | 50% | 273 B |
Two things stand out. First, renaming locals is worth about 100 bytes here, the biggest single lever. Second, the gzipped column moves much less than the minified column. Minifying cut the raw file by 338 bytes, but the gzipped file only shrank from 413 B to 295 B, a saving of 118 bytes. Gzip was already good at squeezing out repeated whitespace and long repeated names. That's why the tool shows the gzipped size: it's the honest number.
On very small inputs the gzipped figure disappears from the stats line. Gzip adds about 20 bytes of header, so a 24-byte file gzips to 44 bytes. Servers don't bother compressing files that small, so showing it would be misleading.
When minified code behaves differently
Minified code does the same thing as the original. Occasionally "the same thing" surprises you, because any JS minifier is stricter about it than you were. These are the cases worth knowing.
Code whose result nobody reads gets removed
Paste this click counter:
(function () { var clicks = 0; document.addEventListener('click', function () { clicks = clicks + 1; }); })();
You get document.addEventListener("click",function(){}); back. The counter is gone. That's correct: nothing ever reads clicks, so counting it changes nothing. If you left it in to inspect later in the debugger, it won't be there. Use the value somewhere, even in a console.log, and it stays.
A missing semicolon gets read the way the browser reads it
var b = a followed by (function(){})() on the next line comes out as var b=a(function(){})();. That looks like a bug, but it's how JavaScript itself parses those two lines: a line starting with ( continues the one above it. The minifier reproduces the behavior your original already had, it doesn't fix it. If the output reveals a surprise like this, the bug was in the source.
TypeScript and JSX are parse errors
Type annotations and JSX aren't JavaScript, so the tool stops and tells you where. let n: number = 1; gives Line 1, column 6: Unexpected token: punc (:). JSX like const el = <div>Hi</div>; gives column 12. An unfinished function open() { gives Unexpected end of file. Compile those files first, then minify the output.
Tips for smaller, safer scripts
- Wrap your script in a function if it doesn't need globals. Top-level names are never shortened. Put the code inside
(function () { … })();and every name inside becomes local, so they all get shortened. - Use Remove console.* calls for release builds only. It deletes the whole call, arguments included.
console.log(counter++)takes the++with it. - Keep your readable copy. Minified code is a build output, not a source file. Edit the original, then minify again.
- Don't minify twice and expect more. Feed the tool its own output and there's usually nothing left to take.
function add(d,n){return d+n}console.log(add(1,2));goes in at 51 B and comes out at 51 B, 0% smaller.
If the stats line says the output is larger, nothing is wrong. var a=1 becomes var a=1;, one byte bigger, because the minifier always closes a statement with a semicolon.
Related developer tools
If the script you're shipping carries configuration, clean the data up with the JSON Formatter, and use JSON Escape / Unescape when that JSON has to live inside a JavaScript string. Icons inline in the same page shrink with the SVG Optimizer, which does for SVG what this tool does for scripts. To check the page your snippet lands on, paste its markup into the HTML Viewer. And when a minified line has a pattern you need to find, the Regex Tester is quicker than squinting.
Frequently asked questions
Is minified JavaScript the same as obfuscated JavaScript?
No. Minifying makes code smaller. Obfuscating makes it hard to read on purpose, often making it bigger along the way. Minified code is hard to read as a side effect, but a code formatter will lay it out again in seconds. Don't rely on minifying to hide secrets. An API key in minified code is still an API key anyone can copy.
Does minifying make JavaScript run faster?
Mostly it makes it arrive faster. A smaller file downloads sooner and parses a little quicker, which matters most on slow phones and slow connections. Runtime speed barely changes. A few rewrites, like folding 60 * 60 * 24 into 86400, save a tiny amount of work on every load.
Do I still need to minify if my server gzips files?
Yes, and the numbers show why. On the Sample script, gzip alone takes 757 B down to 413 B. Minifying and then gzipping gets it to 295 B. Gzip can't remove a comment or shorten a variable name, so the two stack.
Why are my function names still long after minifying?
Because they're at the top level of the script. The minifier keeps those names so HTML attributes and other scripts can still call them. Only names inside functions are shortened. Wrap the script in a function if nothing outside needs those names.
Can I minify JavaScript that uses import and export?
Yes. import and export statements are kept and compacted. A 103-byte module that imports format and exports a show function comes out at 81 bytes, with every import and export name intact.
Why does the output contain void 0 and !0?
They're shorter spellings of undefined and true. !1 is false. Every browser reads them the same way, and each one saves a few bytes that add up across a big file.