JavaScript and TypeScript Minifier

How to use it#

Paste JavaScript or TypeScript into the box, or drop a .js, .mjs, or .ts file on it.
Choose the language, Script or Module, whether to keep licence comments, whether names are shortened, and whether console calls are removed.
Check the sizes, then copy the result or download it as a .min.js file.

What a JavaScript minifier does to the code#

Minifying, also called compressing or uglifying, makes the file smaller in three ways. Whitespace and comments go. Local variables and parameters get one-letter names, so a function taking customerRecord takes e. And expressions are rewritten in shorter forms that compute the same thing: false becomes !1, 1000 becomes 1e3, an if with one statement becomes a && or a ternary, and a constant used once is written in where it is used.

None of that changes what the code does, and the default settings go no further. Terser has transforms that are only safe under assumptions about your code, such as no script on the page having replaced a built-in like Array or Math. They are all left off here. A string, a number, a template literal, or a regular expression may come out spelled differently, with other quotes or an escape in place of a character, but its value is the same.

Code written in plain ASCII stays that way, with an escape such as \u00e9 kept as an escape rather than turned into é, so the file still reads the same whatever character set the server sends it with. Code already minified, like most files from a package or a CDN, gets almost nothing smaller: minifying twice saves a few bytes at most.

What shortened names do to debugging#

An error thrown in minified code reports a line of several thousand characters and names like t and n, which says very little about where the problem is. Debugging is where minifying costs you, far more than in the seconds it takes to run.

A source map fixes this. It records where every piece of the minified file came from, and browser developer tools use it to show the original code in stack traces and the debugger. This page does not make one, because a map is only useful when the original file sits beside it wherever the code is debugged, and at that point a build step is doing the work anyway.

If you need readable stack traces without a map, turn off Shorten variable names. Every name survives, and the file comes out noticeably larger: 94 KB instead of 61 KB for the js-yaml example in the questions below. Keep function and class names does the same for those names alone, for code that reads a function name at run time or logs it.

Compressing JavaScript by hand, or in a build#

This page suits one file: a script for a static site, a snippet for a tag manager or a bookmarklet, a library file with no minified copy, or a check of how much a file would shrink before you set up tooling for it. Paste it, check the sizes, and download the .min.js.

A project that ships JavaScript regularly should minify in its build, so no one has to remember to. Vite and webpack minify production builds by default, esbuild does with --minify, and Rollup does with a terser plugin. Each writes a source map beside the output when asked, and the terser command line does the same for a single file with --source-map.

Frequently asked questions#

Does minified JavaScript behave exactly the same?

With the defaults, yes. Only transforms that keep behaviour run, and every value is kept even where it is written differently. Two settings change behaviour, and you choose both. Shortening names renames functions and classes, so code that reads fn.name or a class name at run time gets a different answer unless Keep function and class names is ticked. Remove console calls deletes every console.log and its relatives, including any work done inside their arguments.

Should I choose Script or Module?

Choose by how the file is loaded. A classic script tag shares its top-level names with every other script on the page, so they are kept as written in case something else uses them. A module, loaded with type="module" or imported, keeps its top-level names to itself, so they can be shortened and unused ones dropped, which saves more. Code with import or export, or with await outside a function, can only be a module, so it is minified as one whatever you choose, and the caption says so.

How much does minifying JavaScript actually save?

Less than the raw number suggests, because servers send JavaScript gzipped or Brotli compressed, and compression already squeezes out much of the repeated whitespace. As a measured example, the js-yaml library as an ES module is 129 KB with its comments, and 61 KB minified, 52% smaller. Gzipped, it goes from 27.9 KB to 17.8 KB, 36% smaller. Without shortened names the saving is 27% raw and 23% gzipped. The Gzipped row measures your own code by compressing both versions in the browser.

Why keep licence comments?

Most open source licences, MIT and BSD among them, ask that the copyright notice travel with the code, including a minified copy. By convention those notices are written /*! ... */ or carry @license, @preserve, or @copyright, and those are the comments Keep licence comments holds on to. Every other comment is removed either way. Untick it only for code you wrote yourself, or whose notice you publish somewhere else.

Can it make a source map?

No. A source map points back at the original file, so it only helps where that file is published beside the minified one, which is a build tool job. The terser command line with --source-map, esbuild with --minify --sourcemap, or a Vite production build with build.sourcemap set will each write the map for you.

Why does it say my JavaScript has an error?

Terser has to parse the code before it can shrink it, and it stops at the first thing that is not valid JavaScript, giving the line and column. JSX is the usual cause, because it is not JavaScript until it has been compiled. TypeScript is read as TypeScript, so an error reported in it is a real mistake in the code, with its line and column as well. The last result that worked stays on screen while you fix the code.

Can it minify TypeScript?

Yes. Choose TypeScript, or just paste it: code that only parses as TypeScript is read as TypeScript, and the caption says so. Sucrase takes the types out first, without type checking, and terser minifies the JavaScript that is left, so the result downloads as .min.js. Interfaces, type aliases, annotations, as, and satisfies go. An enum becomes the object the compiler would make, a constructor parameter marked private or public becomes an assignment, and an import that brings in only types is dropped, because its names do not exist at run time. A namespace that holds code is refused with a message, because only the TypeScript compiler converts one. Decorators and JSX, as in a .tsx file, stop with a syntax error.

Is my code uploaded?

No. Terser, and Sucrase for TypeScript, run in this browser tab, in the background so typing stays smooth on a large file, and nothing you paste or drop is sent anywhere.