What is minified JS? How to spot and read it

Minified JS is JavaScript that has had everything the browser doesn't need removed: comments, whitespace, line breaks and, usually, long variable names. The result runs exactly like the original, but it's smaller, so it downloads and loads faster. You'll mostly see it in files ending in .min.js and in the bundles your build tool ships to production.

What minified JS means

It is the output of minification, which MDN defines as "the process of removing unnecessary or redundant data without affecting how a resource is processed by the browser". For JavaScript, that covers comments, white space, unused code and the shortening of variable and function names.

The idea is old. Wikipedia's history of minification credits Douglas Crockford with JSMin in 2001, a tool that removed comments and whitespace from JavaScript. Modern minifiers go further and rewrite the code itself.

Here's a small function as a developer writes it:

// Add tax to a price
function addTax(price, taxRate) {
  const tax = price * taxRate;
  return price + tax;
}

And the same function after a minifier like Terser has compressed and mangled it:

function addTax(n,t){return n+n*t}

The comment and spaces are gone. The parameters are now n and t, and the temporary tax variable got folded into the return line. Same price, same rate, same answer.

Why websites ship minified JavaScript

Websites ship minified JavaScript because smaller files reach the browser sooner. MDN says minification is used to improve web performance by reducing file size.

A browser downloads every byte of a script before it runs it. Comments and indentation help whoever maintains the code; the engine ignores them.

jQuery's download page shows the trade-off. It offers jquery-4.0.0.js as the uncompressed development version and jquery-4.0.0.min.js as the compressed production version. The first is for development or debugging. The second saves bandwidth and improves performance in production.

How minifiers shrink code

A minifier shrinks code in three main ways: it strips characters, it renames things, and it rewrites logic into shorter forms. Terser, one of the most common minifiers, calls itself a "parser, mangler and compressor toolkit". Each word maps to a job:

Parsing. The minifier reads your code into a syntax tree, so it works on structure, not text search and replace.
Compressing. The --compress (-c) flag drops dead code and rewrites expressions into shorter equivalents.
Mangling. Pass --mangle (-m) and Terser renames local variables and parameters to one or two letters.

Mangling causes most of the unreadability, and most of the breakage. Terser's docs say its keep_fnames option stops the compressor from discarding function names, which matters if your code reads fn.name. Its property mangling option warns: "THIS WILL BREAK YOUR CODE." For the practical side of running these tools, see how to minify JavaScript.

How to recognise a minified script

You can usually spot minified JavaScript in a few seconds:

A .min.js file name. It's a convention that browsers ignore. jQuery uses it to tell the production copy apart from the readable one.
One very long line, or a handful of them.
Single-letter variable names like e, t and n.
A trailing comment like //# sourceMappingURL=app.min.js.map, which points to a source map (more below).

Don't rely on the suffix. A bundler's production build often uses hashed file names instead, and that output is minified too.

How to read minified code you didn't write

You read minified code by putting the whitespace back, then, if you're lucky, by loading its source map.

Pretty-print it

According to Chrome's DevTools reference, the Sources panel pretty-prints minified files by default. Open DevTools, go to Sources, click the script, and set breakpoints in the indented code. To see the file as it was loaded, click the data_object icon at the bottom left of the editor.

Outside the browser, paste the code into the JavaScript formatter. It runs in the page and doesn't send your input anywhere.

Pretty-printing restores layout. The names stay n and t, and stripped comments stay stripped.

Load the source map

A source map is a file that maps the minified code back to the original files. The format is now a standard, ECMA-426, which describes it as being "used for mapping transpiled source code back to the original sources."

A script points to its map with either:

a comment at the end, like //# sourceMappingURL=foo.js.map
a sourcemap HTTP response header (the older x-sourcemap name is deprecated)

If DevTools finds the map, it shows the authored files with real names and comments. Many sites don't publish their maps. jQuery offers jquery-4.0.0.min.map as a separate download and says CDN copies no longer include the comment that links to it.

Is minified JS obfuscated or secure?

Minified JavaScript is not secure, and it isn't really obfuscated either. Wikipedia notes that the two have different goals, even though minifiers borrow tricks like renaming.

Anyone who opens DevTools can read what you send to the browser. Minification slows them down and stops no one. Never put API secrets, private keys or admin-only logic in front-end JavaScript and count on minification to hide them.

My take: minification is a delivery format, like a zip file. Keep the readable source in your repo, let the build produce the .min.js, and always generate a source map for your own error tracking, even if you never serve it publicly.

When minification causes problems

Minification causes problems in a small number of cases, and they're predictable:

Code that reads names at runtime. Mangling renames functions and classes, so fn.name or constructor.name returns a short letter instead of the name you wrote.
Property mangling. Renaming object properties breaks anything that accesses them by string, which is why Terser warns about it.
Stack traces. A production error reads like TypeError: n is not a function at app.min.js:1. Without a source map that line number is useless: the whole file is line 1.

The formatter on this site can't reverse mangling. It restores indentation, nothing more. For the real names you need a source map or the original repo.

The same goes for data. Minified JSON is JSON format with the whitespace removed. Reformat it in your editor, as shown in formatting JSON in VS Code. And since minifiers strip comments anyway, here's why JSON can't have comments at all.

FAQ

Does minified JavaScript run differently from the original?

No. Minification removes data the browser doesn't need, so the code behaves the same. Bugs only appear when a minifier option changes names that your code reads at runtime.

What does .min.js mean in a file name?

It's a naming habit that marks the minified copy of a script, such as jquery-4.0.0.min.js next to the readable jquery-4.0.0.js. Browsers don't treat the name specially.

Is minified JavaScript the same as obfuscated JavaScript?

No. Minification aims at a smaller file, and obfuscation aims at hiding how code works. Minified code can be pretty-printed and read by anyone who opens it.

How do I read a minified file?

Open it in your browser's DevTools, which pretty-prints minified files by default, or paste it into a JavaScript formatter. If a source map exists, DevTools can show the original files instead.