How to Minify JavaScript with Terser to Cut Your Bundle Size

Why minify JavaScript at all?

JavaScript is often the heaviest asset on a page, and unlike an image it must be downloaded, parsed, and executed before your app becomes interactive. Every extra byte delays that. Minification shrinks the file by removing everything the engine does not need: whitespace, comments, and long human-friendly variable names. Done well, it can cut a script's size by half or more before compression even kicks in.

Minifying vs. beautifying vs. bundling

These get confused, so keep them straight. Beautifying adds whitespace to make code readable. Minifying removes whitespace and shortens names to make code small. Bundling (webpack, Vite, esbuild) combines many modules into one file. A minifier operates on a single blob of already-written JavaScript; it is the compression step, not the module graph.

How Terser does it

The JavaScript Minifier on filemarkr runs Terser, the same industry-standard engine used inside most modern build tools, entirely in your browser. It applies two big transformations:

• compress — dead-code elimination, constant folding, collapsing simple expressions, dropping unreachable branches, and other semantics-preserving rewrites.
• mangle — renaming local variables and function parameters to single letters like a, b, c. Because these names are only visible inside their scope, shortening them is safe and saves a lot of bytes.

Terser parses your code into an abstract syntax tree, transforms the tree, and prints it back out. That is why it can safely rewrite true ? x : y into x but will never touch a public API name that could be referenced from outside.

A practical walkthrough

Take this readable source:

function greet(userName) {
  const greeting = "Hello, " + userName + "!";
  // log for debugging
  console.log(greeting);
  return greeting;
}

After running Terser with compress and mangle, you get something like:

function greet(n){const o="Hello, "+n+"!";return console.log(o),o}

The comment is gone, whitespace is gone, userName became n, and the two statements were folded using the comma operator. The tool reports the original size, the minified size, and the percentage saved so you can measure the win.

Common pitfalls and tips

• Never rely on function.name or a variable's identifier at runtime. Mangling renames them, so code that reflects on names (some DI frameworks, certain serializers) can break. Configure your build to preserve those specific names, or avoid the pattern.
• Minify already-transpiled code. Terser expects valid JavaScript. If you use very new syntax, run your transpiler first, then minify the output.
• Keep source maps for debugging production. In a real build pipeline, generate a source map so a mangled stack trace can be mapped back to your original code.
• It is one file, not a bundler. This tool compresses the JavaScript you paste in. For a whole app, your bundler already calls Terser under the hood; use this for quick one-offs, snippets, or checking how small a file can get.

The reverse direction

If you receive minified, mangled code and need to read it, run it through the JavaScript Formatter to restore structure (though the short names remain). When trimming a full front-end, pair this with the CSS Minifier.

Conclusion

Minifying with a real Terser engine gives you production-grade compression for any JavaScript you paste, right in the browser, with nothing uploaded. Understand the two levers, compress and mangle, keep your original source and source maps, and you get smaller, faster-loading scripts without changing what they do.