JavaScript minifier and beautifier

This page runs Terser 5, the minifier inside many JavaScript build tools. The toggles map directly to Terser options, so a setting you like here can go straight into your build config:

Real output from the minifier on this page, with the default options:

In the last example veryLongName is not renamed: it is a top-level name, so another script might use it. Turn on Top-level scope and the whole line becomes console.log(2);.

The Terser command line, with compression, mangling and a source map:

npx terser app.js --compress --mangle --source-map --output app.min.js
# writes app.min.js and app.min.js.map

The Node API is async and returns the code and the map:

import { minify } from 'terser';

const result = await minify(source, {
  compress: { drop_console: true },
  mangle: true,
  sourceMap: { url: 'app.min.js.map' },
});
// result.code, result.map

esbuild minifies too, and is often used for speed when you bundle with it anyway:

npx esbuild app.js --minify --sourcemap --outfile=app.min.js

If you use a bundler, production builds usually minify already. Use this page for a single script, a snippet for a CMS or an embed, or to see what an option changes.

A source map is a JSON file that links each position in the minified file back to the original. With it, browser dev tools show your readable code in errors and the debugger. Turn on Source map, then download both files: the minified script ends with //# sourceMappingURL=script.min.js.map, so keep the two files side by side on your server.

A public source map also shows your original code to anyone who opens dev tools. If that matters, upload the map to your error tracker instead of serving it.

• Code that reads names. Mangling renames functions and classes, so fn.name and constructor.name change. Turn on Keep function names if your code or a library depends on them.
• Globals shared between scripts. With Top-level scope on, top-level names are renamed or dropped. Leave it off for classic scripts that define globals for other files.
• eval and with. Terser does not mangle names in scopes that use eval or with, so such code stays bigger.
• Syntax errors. Terser needs valid JavaScript. JSX and TypeScript must be compiled first. The error box shows the line, column and the code around it.

Minifying a whole page? The HTML formatter minifies inline scripts and styles in Minify mode, and the CSS minifier handles stylesheets. For more developer tooling, browse code tools on DevHunt.