Minify JavaScript _

How JavaScript minification works

Terser works in four stages over your code's Abstract Syntax Tree. Each stage is independent, so you can switch any of them on or off without breaking the others.

1. Parse. Terser parses your JavaScript into an AST. Any syntax error surfaces here with the token and line that caused it, so you find the real problem before any transformation runs. The parser accepts every standard ECMAScript construct up to the latest stage-4 proposals.
2. Compress. The compressor walks the AST and applies dozens of semantics-preserving transforms: constant folding, dead-branch elimination, inlining of short pure functions, collapsing of sequential var declarations, and rewriting of equivalent statement forms (if/else into ternaries, comparison-chain shortening, conditional return collapsing). Every transform is reversible in principle; the compressor never changes observable behaviour.
3. Mangle. The mangler renames local bindings to the shortest unique identifiers (a, b, c, …) within each scope. Only names that cannot escape the module boundary are renamed, so exported bindings, property keys, and global references survive untouched. The result is the biggest single byte saving of any stage.
4. Render. Terser prints the transformed AST back to a JavaScript string with whitespace collapsed and statement separators reduced to the minimum the grammar accepts. Comments are stripped unless the preserve-license toggle keeps /*! … */ blocks, which most CDN licenses require you to retain.

Why minify JavaScript

• Faster page loads. Smaller scripts parse and execute sooner. On a 4G mobile connection a 40-percent byte reduction shaves real seconds off Time to Interactive, which is the metric Google's PageSpeed Insights measures most aggressively.
• Lower CDN egress bills. CloudFront, Cloudflare, and Fastly bill per gigabyte of egress. A 40-percent script reduction across millions of monthly page views compounds into real savings before any image or CSS work lands. The math holds even after gzip and brotli — minification removes tokens that the compressor would otherwise have to encode.
• This minifier doesn't tax your page. Terser is ~1 MB uncompressed. Most online minifiers ship the entire library on page load, which tanks their own Lighthouse score and makes the page feel sluggish before the user types anything. This page lazy-loads Terser only when you click Minify or switch Live mode on — so the initial render stays under the Core Web Vitals thresholds the tool itself promises to help you hit.
• Passing Core Web Vitals. Lighthouse and PageSpeed Insights flag large JavaScript as a direct contributor to poor Total Blocking Time. Minifying vendor libraries and application bundles is the fastest win on the Lighthouse "Reduce unused JavaScript" and "Remove duplicate modules" audits — usually a one-shot reduction worth ten or twenty points.

Common applications

JavaScript minification shows up at almost every stage of a modern web project.

• Pre-commit hooks: minify individual utility scripts before committing to a repo so the committed artifact is production-ready and the diff shows logic changes rather than whitespace churn.
• Third-party widget audits: paste a vendor's embed snippet and check whether it's already minified or can be shrunk further before serving it to millions of users.
• Legacy script cleanup: compress old jQuery plugins and hand-authored scripts that predate your current build pipeline, without touching the source tree.

A worked example

Take a small function: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — about 130 bytes including the comment. Paste it above with Mangle and Compress both on. The output shortens to roughly function add(n,o){return n+o}console.log(add(1,2)); — about 55 bytes, a 58-percent reduction. The function name add survives because it's referenced in the console.log call; the parameter names firstNumber and secondNumber shorten to single letters because they're local to the function body. Switch Mangle off to keep readable parameter names while still collapsing whitespace and dropping the comment.

FAQ

Does this run in my browser?

Yes. Terser is lazy-loaded the first time you click Minify or enable Live mode — about 200 KB compressed lands in your browser cache, then nothing further is downloaded. Your code never leaves the page.

What is name mangling and is it safe?

Mangling renames local variables to single letters to save bytes. It's safe for self-contained scripts and IIFE bundles because the renames never leave the scope. It's NOT safe for scripts that expose globals by name (e.g. window.myLib = …) without a wrapper. Turn Mangle off when unsure.

Why did my code break after minification?

Three usual suspects: eval or with referencing variables by string; Function.name or arguments.callee reads that depend on the original identifier; or globals exposed by a name that was renamed. Switch Mangle off first to isolate whether renaming or a Compress transform is the cause.

Does this support modern syntax (ES2020+)?

Yes. Set the ECMAScript target to ES2020 or Next and Terser preserves optional chaining, nullish coalescing, top-level await, and logical-assignment operators. Set it to ES5 and Terser down-compiles where it can, but it's not a full transpiler — use Babel for syntax ES5 can't represent at all.

Browser-side JavaScript minification with Terser gives you production-quality output without adding a build tool. Paste a script, pick the ECMAScript target, copy or download the result. Nothing uploads, no account, no build pipeline. The minifier itself only loads when you ask it to — so opening this page costs you a few kilobytes, not a megabyte.