JavaScript Minifier & Beautifier

Minify JavaScript

Minify mode runs Terser, the same minifier most bundlers use. It removes whitespace and comments, then applies compression passes: constant folding, dead-code elimination, merging of variable declarations, and shorthand transforms like if/else to ternaries. With name mangling enabled, local identifiers shrink to single letters.

The options map to the decisions that matter in real builds:

• Mangle names produces most of the savings. Disable it only when something reads names at runtime, such as error-reporting tools that log fn.name.
• Drop console calls removes console.* statements entirely, including their arguments. If an argument had a side effect, that side effect disappears too.
• Keep function names preserves fn.name and class names while still mangling everything else. Stack traces stay readable at a small size cost.
• Keep licence comments preserves comments that start with /*! or contain @license, which many libraries require for attribution.
• ES module parses the input as a module so import and export work.

Beautify JavaScript

Beautify mode formats code with Prettier: choose 2 spaces, 4 spaces, or tabs, a wrap width of 80, 100, or 120 characters, and whether statements end with semicolons. Syntax errors surface with a line and column number instead of partial output.

Beautifying a minified file recovers the structure, not the names. function a(b,c) becomes properly indented multi-line code, but a, b, and c keep their minified names, because the originals were discarded when the file was first compressed.

Example: what minification does

Input:

function addToCart(item, quantity = 1) {
  const existing = cart.find((entry) => entry.id === item.id);
  if (existing) {
    existing.quantity += quantity;
  } else {
    cart.push({ ...item, quantity });
  }
}

Output with mangling on:

function addToCart(t,n=1){const e=cart.find(e=>e.id===t.id);e?e.quantity+=n:cart.push({...t,quantity:n})}

Top-level function names survive by default in script mode because another script may call them. Everything local is fair game.

Syntax support and limits

Terser accepts modern syntax through recent ECMAScript editions, including optional chaining, nullish coalescing, class fields, and top-level await in module mode. It does not accept TypeScript or JSX; run those through their compiler first and minify the JavaScript output.

Very large bundles work, but everything runs in a worker in the page, so a multi-megabyte file takes a few seconds and the tab’s memory grows with it.

Reading the stats

Byte counts use UTF-8 encoding. A typical unminified script drops 40 to 70 percent, more when it carries heavy comments or long descriptive names. The percentage shown compares raw bytes; after gzip the relative gap shrinks, but smaller pre-compression input still parses faster on the client.