JavaScript & CSS Minifier

What it does

Minification removes everything a browser does not need to run your code: whitespace, line breaks, comments and long names. Smaller files download faster, which improves page load time and Core Web Vitals, especially on mobile networks.

This tool minifies JavaScript with Terser, the minifier used by webpack, Rollup and Vite, and CSS with CSSO, which also restructures stylesheets: it shortens colors (#ffffff to #fff), removes redundant units and values (0px 0px to 0), and merges rules that share selectors or declarations.

How to use

1. Paste code into the Input box, drop a .js or .css file on it, or click Sample.
2. Choose JavaScript or CSS.
3. For JavaScript, Shorten variable names renames local variables and parameters to single letters. Exported and global names are never changed.
4. For CSS, Merge duplicate rules combines rules with the same declarations.
5. Copy the result or download it. The size counters under each box show how much you saved.

If the JavaScript has a syntax error, the error message shows the line and column so you can jump to it.

Example

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

becomes

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

When to use it

Use it for a quick one-off: a snippet for a CDN, an inline script in an HTML email, a bookmarklet, or to check how small a library could get. In a real project, your bundler should minify on every build so the source stays readable.