My Tool Studio
Developer Tools·2 min read

How to Minify JavaScript With Terser Online

Production JavaScript should be small. The JavaScript Minifier runs your code through Terser, the library many bundlers use, and returns a much smaller version that behaves the same. It suits a quick script for a CMS, a bookmarklet or a small widget when you have no build tool set up. Your code stays in your browser.

1.24 KB{"a": 1,"b": 2}MINIFIED · 430 B{"a":1,"b":2,"c":3,"d":4}−64%

What minifying JavaScript does

Same behaviour, fewer bytes.

Terser removes whitespace and comments, shortens local variable and parameter names, and rewrites code into shorter forms that behave the same, such as dropping branches that can never run. The line under the panes shows the size before and after, the percent saved and a gzip estimate.

Minifying is not obfuscation. Minified code is harder to read, but it is not protected. Obfuscation deliberately makes code hard to understand and often makes it bigger.

The options

The switches worth knowing.

Tick or untick these before you click Minify:

  • Shorten variable names (mangle): the main saving. If your code depends on function or class names at runtime, such as checks on fn.name, also tick Keep function and class names.
  • Remove console.* calls and Remove debugger statements: keep debug code out of production. Console arguments are dropped too, so keep side effects out of them.
  • Keep license comments: keeps comments that start with /*! or contain @license, @preserve or @copyright. Leave it on for code that includes open-source libraries.
  • ES module (import/export): allows import and export and lets top-level names be shortened. Leave it off for a classic script whose functions other scripts call by name.
  • Output syntax and Compress passes: choose ES5, ES2015 or ES2020 output, and one to three passes. Extra passes can save a little more.

When minifying fails

Errors with a line and column.

A syntax error shows its line and column instead of an empty result. Modern syntax such as arrow functions, classes, async functions and optional chaining is supported. TypeScript types, JSX and decorators are not plain JavaScript, so compile them first, for example with the TypeScript compiler or esbuild.

Browser tool or build step

Pick the right place.

For a project that changes often, add minification to your build instead. For a one-off file, pasting here or clicking Upload .js is faster than setting up Node. Gzip or Brotli on the server reduce the transfer size further.

You can still debug the result. Tick Generate source map, click Minify, then use Download .map. The minified file ends with a sourceMappingURL comment, so when both files sit side by side on your server, browser DevTools show your original code in error traces. For several scripts, the batch panel minifies them into a ZIP or combines them into one bundle.min.js.

Reading it again, and other languages

Minifying is one-way for names.

Beautify instead on this page, or the JS Beautifier, restores line breaks and indentation, but shortened names and removed comments cannot be recovered, so keep your source. Stylesheets and markup have their own tools: the CSS Minifier and the HTML Minifier.

Try it now

Open JavaScript Minifier

The tool is one click away. No sign up, no upload, no payment.

Open JavaScript Minifier