JavaScript Minifier – Smaller Files, Same Behaviour
A JavaScript minifier rewrites your code so it takes fewer bytes to download while doing exactly the same thing. This tool runs terser, the minifier behind webpack, Vite's build.minify: "terser" and many CDNs, inside a Web Worker in your browser. Paste or drop a .js, .mjs or .cjs file and you get production-ready output, a source map, a list of every renamed identifier and a terser.config.json that reproduces the same bytes in your build.
The three stages of minification
The "Where the bytes went" chart splits the saving into the three things a minifier does. With the default cart.js sample and the Recommended preset, the 644-byte file shrinks like this:
- Whitespace and comments (644 → 474 B): indentation, line breaks and ordinary comments go. License comments that start with
/*!or contain@licensestay. - Compress (474 → 330 B): dead code such as
if (DEBUG)withDEBUG = falseis dropped, constants are folded (1 + 0.08becomes1.08) and a helper called once is inlined. - Mangle (330 → 262 B): local names like
subtotalbecome single letters. Exported names and globals keep their names, because other code depends on them.
Source maps
A source map links every position in the minified file back to the original line, column and name. Browser developer tools and error trackers use it to show readable stack traces. Choose External file to get a .map download and a //# sourceMappingURL= comment, or Inline to embed the map as base64 for quick debugging. This page uses the same map for its click-to-trace feature: click anywhere in the output to highlight the original token.
Scripts, ES modules and top-level renaming
In a classic <script>, top-level functions and variables are globals. Another script or an inline onclick="initMenu()" handler may call them, so terser leaves them alone unless you turn on top-level renaming. In an ES module, top-level names are private unless exported, so they are always safe to rename or drop. Auto mode parses the file as a script first and as a module only if that fails, then tells you which it chose and why.
The unsafe options
The Maximum preset enables unsafe_arrows and unsafe_methods. They save a few more bytes by turning function expressions into arrows and m: function () {} into m() {}. Neither result can be called with new, so they are only safe when no such function is used as a constructor.
console.log(track()) never calls track(). Property mangling renames matching keys everywhere, including JSON and DOM properties. The tool flags both under the output.Minification vs compression
Servers usually send JavaScript with gzip or Brotli compression, which already removes a lot of repetition. Minification and compression work on different things and the savings add up: in the sample, gzip alone takes 644 B to about 381 B, while minifying first and then compressing ends near 222 B. The gzip rows in the chart use your browser's built-in compressor at its default level.
What this tool doesn't do
It isn't a transpiler or bundler. TypeScript and JSX must be compiled to plain JavaScript first with tsc, esbuild or Babel; the tool recognises both and tells you so instead of failing silently. The output-syntax setting only lets terser use newer syntax, it never lowers a?.b ?? 1 to ES5. Bundling several files, fetching scripts from a URL and Brotli sizes are out of scope.
npx terser cart.js --config-file terser.config.json -o cart.min.js to get byte-identical output from the command line.