DEV Community

Snappy Tools
Snappy Tools

Posted on • Originally published at snappytools.app

JavaScript Minification Explained: How Terser Shrinks Your Code (and Why It Matters)

#webdev #javascript #beginners #performance

Every millisecond counts on the web. A 200KB JavaScript bundle takes measurably longer to parse and execute than a 60KB one — and the difference shows up directly in your Core Web Vitals scores. Minification is the fastest, lowest-effort way to close that gap.

Here's exactly what happens under the hood, and how you can do it for free in your browser right now.

What JavaScript Minification Actually Does

Minification is not compression. Compression (gzip, Brotli) happens at the network layer. Minification happens at the source level — it rewrites your code to say the same thing in fewer characters.

A modern minifier like Terser applies several transformations:

1. Whitespace and comment removal

The obvious step. Every space, tab, newline, and comment that isn't inside a string literal gets stripped. On a typical file, this alone saves 20–30%.

// Before
function greet(name) {
  // Say hello
  return "Hello, " + name + "!";
}

// After
function greet(name){return"Hello, "+name+"!"}
Enter fullscreen mode Exit fullscreen mode

2. Name mangling

This is where serious savings happen. Terser renames local variables and function parameters to single characters — a, b, c, and so on. The renamed code is semantically identical but much shorter.

// Before
function calculateDiscountedPrice(originalPrice, discountPercentage) {
  const discountAmount = originalPrice * (discountPercentage / 100);
  return originalPrice - discountAmount;
}

// After (mangled)
function a(b,c){const d=b*(c/100);return b-d}
Enter fullscreen mode Exit fullscreen mode

On large codebases with descriptive variable names, mangling can reduce size by an additional 15–25%.

3. Dead code elimination

Terser removes code paths that can never be reached:

// Before
const DEBUG = false;
if (DEBUG) {
  console.log("This never runs");
}
doRealWork();

// After
doRealWork();
Enter fullscreen mode Exit fullscreen mode

4. Constant folding

Mathematical expressions evaluated at compile time:

// Before
const SECONDS_PER_DAY = 60 * 60 * 24;

// After
const SECONDS_PER_DAY = 86400;
Enter fullscreen mode Exit fullscreen mode

5. Syntax simplification

Terser rewrites verbose patterns into shorter equivalents:

// Before
if (x === true) { return true; } else { return false; }

// After
return x === true;
// Or even: return x;  (if x is already boolean)
Enter fullscreen mode Exit fullscreen mode

ES6+ Support: Why Terser Replaced UglifyJS

The original UglifyJS only understood ES5. That meant to minify modern JavaScript, you had to first transpile ES6+ down to ES5 with Babel, then run UglifyJS — two tools, two steps, two chances for bugs.

Terser is a fork of UglifyJS that natively understands:

  • Arrow functions
  • Template literals
  • Destructuring
  • async/await
  • Classes
  • Optional chaining (?.)
  • Nullish coalescing (??)

No pre-transpilation needed. You can minify modern code directly.

Typical Results

Here are real-world compression ratios from running Terser on common files:

File Original Minified Savings
React (dev) 1,386 KB 419 KB 70%
Lodash 4 532 KB 71 KB 87%
Moment.js 173 KB 66 KB 62%
Simple utility module 8 KB 2.5 KB 69%

Combined with gzip (which all modern servers apply), a minified bundle compresses even further than an unminified one — because repetitive short names gzip better than long variable names.

When NOT to Mangle Names

Mangling breaks code that relies on Function.name or accesses properties by string. If your code does:

class MyService { ... }
container.register(MyService.name, MyService);
// MyService.name is now "a" — breaks DI containers
Enter fullscreen mode Exit fullscreen mode

You can selectively disable mangling for class names or use Terser's keep_classnames: true option.

How to Minify Without a Build Pipeline

You don't need webpack, Vite, or Rollup to minify a file. The fastest way for a quick script or standalone tool page is to paste it directly into an online minifier.

SnappyTools JS Minifier & Beautifier runs Terser entirely in your browser — no code is sent to any server, no account needed. Paste, click, copy.

It also works in reverse: if you need to read minified third-party code, the beautify tab reformats it back to readable indentation.

The Flip Side: Beautification

You'll sometimes encounter minified JavaScript you need to understand — a vendor bundle, a legacy script without source maps, or obfuscated analytics code.

A beautifier reintroduces whitespace and newlines to make the code readable again. It can't recover original variable names (those are gone forever after mangling), but it makes the structure comprehensible.

Practical Workflow

For a quick standalone script:

  1. Write your code in normal, readable form
  2. Paste into a minifier before deploying
  3. Keep the original source file — never edit the minified output

For a build pipeline:

  1. Add terser as a dev dependency
  2. Configure your bundler (webpack TerserPlugin, Vite's built-in minification) to run on production builds
  3. Use source maps so DevTools can show the original code despite minification

Conclusion

Minification is one of the highest-ROI performance optimisations available. A 60-70% reduction in bundle size with zero changes to functionality, applied in seconds. Terser handles modern JavaScript natively, and with browser-based tools, there's no reason to skip it even for quick projects.

Try it on your next script: snappytools.app/javascript-minifier-beautifier

Top comments (0)