JavaScript Minifier

About this JavaScript minifier

A JavaScript minifier rewrites a script as a semantically equivalent but byte-smaller version. The output runs identically in every engine, but it is faster to download, faster to parse, and smaller after gzip or brotli compression. This page runs Terser, the de facto standard minifier maintained by the original UglifyJS author. Terser powers the production builds of Webpack, Vite, Rollup, esbuild (when feeding Terser as the final pass), Parcel, and roughly every JavaScript bundler shipped after 2018.

Three transformations do most of the work. Whitespace and comments collapse, identifiers shorten (local variables become single letters in a process called mangling), and dead code is eliminated (an if (false) { ... } branch is removed entirely). On a typical React component, Terser cuts source size by 30 to 55 percent before gzip, then gzip squeezes the renamed identifiers another 20 to 30 percent because mangled names repeat predictably.

How the minifier works

The page loads Terser from a public CDN and runs it locally on your code. Your script is never uploaded.

const result = await Terser.minify(input, {
  compress: { drop_console: false, passes: 1 },
  mangle:   { toplevel: false, reserved: [] },
  format:   { comments: /^!|@preserve|@license/ },
});
console.log(result.code);   // minified output
console.log(result.error);  // syntax error, if any

The pipeline is: parse to AST, run compress passes (constant folding, dead code elimination, expression simplification), mangle (rename locals to one or two characters), then emit. Top-level mangling stays off by default so global exports keep their original names; flip mangle.toplevel on for IIFE-wrapped bundles where nothing escapes.

Worked example: before and after

Input (267 bytes, formatted):

function calculateTotalPrice(basePrice, quantity, discountPercent) {
  const subtotal = basePrice * quantity;
  const discountAmount = subtotal * (discountPercent / 100);
  const finalPrice = subtotal - discountAmount;
  return finalPrice;
}
console.log(calculateTotalPrice(100, 3, 10));

After Terser with default options (94 bytes, one line):

function calculateTotalPrice(o,n,c){const t=o*n;return t-t*(c/100)}console.log(calculateTotalPrice(100,3,10));

With compress.passes: 3 Terser would also inline the function entirely if it sees the call exactly once, reducing the output to just console.log(270) at build time.

Minifier options compared

Common pitfalls

• Minifying code that uses Function.prototype.name for routing. Mangling renames functions, so frameworks that introspect fn.name break in production. Add reserved names to mangle.reserved or disable top-level mangling.
• Stripping console.log on a debug page. If you enable compress.drop_console: true in a debug build, you lose the diagnostic output you wanted to read. Wire the flag to NODE_ENV === 'production'.
• Forgetting /*! @license */ comments. Terser drops every comment by default. Open-source licenses must travel with the code, so mark them with /*! or use the format.comments regex shown above.
• Minifying ES modules then loading them via classic script. Terser preserves import and export by default. If your runtime expects a UMD or IIFE wrapper, run a bundler first; the minifier alone will not produce a script-tag-loadable file.
• Expecting source maps from this page. The browser tool returns minified code only. Production builds need sourceMap: { url: 'inline' } or an external map, which requires the bundler integration so the map can be served alongside.
• Running Terser on already-minified vendor code. Each pass is destructive; re-mangling can occasionally rename a reserved identifier the original author depended on. Treat bundled vendor files as black boxes and concatenate, not re-minify.

Related developer tools

Frequently asked questions