JavaScript Minifier & Beautifier
Minify or beautify JavaScript for production or debugging.
Written by Anil Gautam · Updated
How does this JavaScript minifier shrink code?
Minify mode makes four passes with regular expressions. It deletes /* block */ comments, deletes // line comments unless the slashes follow a colon (so https:// inside a string survives), turns every run of whitespace into one space, and removes the spaces around { } ( ) ; , : = < > + - * / & | and ?. Variable names and unused code stay as they are. The sample function in the input box drops from 143 bytes to 106, about 26 percent: its comment line goes, the spaces around + and the braces go, and the space after return stays because a quote mark is not in that list.
Beautify mode reads the code one character at a time, skips over quoted strings, and starts a new line after every opening brace, closing brace and semicolon, indenting two spaces per open brace. It has no notion of loops or comments, so for (let i = 0; i < 3; i++) is split across three lines at its semicolons, and a // comment that contains a semicolon is broken in two. A semicolon inside a regular expression such as /[;]/ also gets a new line, which ruins the pattern, so treat beautified output as something to read.
Why does minified JavaScript stop working?
The minify passes treat strings, template literals and regular expressions like the rest of the code. Inside quotes, "a = b, c: d" becomes "a=b,c:d", double spaces shrink to one, and the line breaks in a template literal turn into spaces. A string that contains /* and */ loses everything from the first marker to the second. Any // inside a string that does not follow a colon, such as the protocol-relative URL "//cdn.example.com/x.js", is taken for a comment, and the rest of the line disappears with it. A regular expression containing // is cut the same way.
Line breaks cause most of the remaining trouble. Code written without semicolons depends on them, so const a = 1 and const b = 2 on separate lines become const a=1 const b=2, which is a syntax error. Removing spaces can also merge operators: a + +b turns into a++b, which no longer parses. Run the output once before you ship it. For stylesheets and markup, the CSS Minifier & Beautifier and the HTML Minifier & Beautifier do the same job.