JS Minifier

About the JS Minifier

JavaScript written for people is full of comments, indentation and long, descriptive names. Browsers do not need any of that. The JavaScript Minifier shrinks your code so it downloads and starts faster, while it keeps doing exactly the same thing.

It uses Terser, the minifier behind many popular build tools. Terser does far more than remove whitespace. It renames local variables to single letters, works out constant values ahead of time, removes code that can never run, and rewrites statements in shorter forms. It understands modern JavaScript, including classes, arrow functions, async code, optional chaining and ES modules.

You choose how far it goes: compress, shorten names, remove console calls, treat the code as an ES module, and keep license comments or function names. The status line shows the size before and after, plus the gzipped size. Everything runs in your browser, so your code never leaves your device.

How to use it

1. Add your JavaScriptPaste code, drop a .js, .mjs or .cjs file onto the box, or use Open file. Sample loads a small shopping cart helper.
2. Choose how much to minifyCompress optimizes the code, Shorten names renames local variables, and Remove console calls deletes console.log and friends (it needs Compress).
3. Set the code typeTurn on ES module for code that uses import and export at the top level. Terser can then shorten top-level names and drop unused ones.
4. Keep what you needKeep license comments preserves /*! ... */ and @license comments. Keep function and class names stops Terser from removing names your code reads at run time.
5. Copy or downloadCheck the size saved in the status line, then copy the code or download it as script.min.js.

Key features

Examples

Minifying the sample

The Sample button loads 469 bytes of JavaScript:

/*! Cart helper | MIT */
// Adds up the items in a shopping cart
function calculateTotal(items, taxRate) {
  let subtotal = 0;
  for (const item of items) {
    subtotal += item.price * item.quantity;
  }
  console.log('Subtotal', subtotal);
  const tax = subtotal * taxRate;
  return Math.round((subtotal + tax) * 100) / 100;
}

export const formatPrice = (amount, currency = 'USD') =>
  new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount);

With the default options, the status line reads 40% smaller and 469 B → 281 B · 234 B gzipped:

/*! Cart helper | MIT */
function calculateTotal(t,o){let r=0;for(const o of t)r+=o.price*o.quantity;console.log("Subtotal",r);const n=r*o;return Math.round(100*(r+n))/100}export const formatPrice=(t,o="USD")=>new Intl.NumberFormat("en-US",{style:"currency",currency:o}).format(t);

The ordinary comment is gone, the license comment stays, and items, taxRate and subtotal became t, o and r. The name calculateTotal is kept because, outside a module, other scripts could call it.

How the options change the result

As an ES module, the result drops to 134 bytes because calculateTotal is never exported or used, so Terser removes it completely. Only formatPrice is left.

Working out values in advance

This script:

const SECONDS_PER_DAY = 60 * 60 * 24;
if (false) { debug(); }
function greet(name) { return "Hello, " + name + "!"; }
console.log(greet("Ada"), SECONDS_PER_DAY);

becomes const SECONDS_PER_DAY=86400;function greet(e){return"Hello, "+e+"!"}console.log(greet("Ada"),86400); (100 bytes). The multiplication is done once, and the if (false) block is gone. As an ES module, Terser goes further and the whole thing becomes console.log("Hello, Ada!",86400);, just 33 bytes.

Keeping function and class names

Inside this wrapper, Terser normally drops the names of formatName and Greeter:

window.app={formatName:function(e,r){return e+" "+r},Greeter:class{hello(e){return"Hi "+e}}};

With "Keep function and class names" on, you get function formatName(e,r) and class Greeter instead, at a cost of 19 bytes. Turn it on when your code reads fn.name or a class name, for example in error messages or a framework that matches on names.

A syntax error

For const total = items.reduce((sum, i) => sum + i.price, 0; the status line says Line 1, column 56: Unexpected token punc «;», expected punc «,». The closing parenthesis is missing before the semicolon.

Tips

• Keep your original files and minify copies for production. Minified code cannot be turned back into your original names and comments.
• Turn on ES module for code that uses import or export. It usually saves the most, because top-level names can be shortened and unused ones removed.
• Remove console calls before shipping to production, but only if nothing in your code depends on what console.log returns or on side effects inside its arguments.
• If minified code breaks, turn the options off one at a time. Code that relies on function names or on reading its own source usually needs "Keep function and class names".
• To read a minified script from another site, paste it into the JavaScript Beautifier first. Names stay short, but the structure becomes readable again.

Common mistakes and limits

• Pasting TypeScript or JSXTerser reads plain JavaScript only. Type annotations like (a: number) and JSX like <div> are syntax errors. Compile them to JavaScript first.
• Turning on ES module for a classic scriptIn module mode, top-level functions that are not exported count as unused and can be removed. A script loaded with a normal <script> tag would lose them.
• Expecting Remove console calls to work without CompressRemoving console calls is part of compression. When Compress is off, the option is grayed out.
• Thinking minified code is protectedMinification makes code harder to read, but anyone can still run it through a beautifier and follow the logic. Do not put secrets in front-end JavaScript.
• Losing license noticesOnly comments that start with /*! or contain @license, @preserve or @copyright are kept, and only while "Keep license comments" is on. Regular comments are always removed.

Frequently asked questions