JavaScript Minifier
Strip comments and indentation and join the lines it is safe to join, without renaming anything or risking automatic semicolon insertion.
/*! my-plugin v1.0 */
const panel=document.querySelector('.panel');function toggle(open){const next=open===undefined?!panel.hidden:open;panel.hidden=!next;panel.setAttribute('aria-expanded',String(next));return next}document.addEventListener('click',(event)=>{if(event.target.closest('.panel-toggle')){toggle()}});
/* 425 to 314 characters, 26.1% smaller. Comments and indentation only: nothing was renamed. */Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Strip the comments and indentation from JavaScript, and join the lines it is safe to join, without renaming anything.
How to use
- Paste the script. Nothing is uploaded; the work happens in this tab.
- Leave the mode on “join lines”. It merges a line onto the previous one only when the previous line cannot end a statement and the next cannot continue an expression.
- Switch to “safe” if you want every line break kept. The result is larger and impossible to get wrong.
- Read the footer. It says how much smaller the file got and reminds you what was not done.
Example
/*! my-plugin v1.0 */
// Toggle the panel.
const panel = document.querySelector( '.panel' );becomes
/*! my-plugin v1.0 */
const panel=document.querySelector('.panel');Comments and indentation are gone, the licence banner stays, and every identifier is untouched.
Pitfalls
- This is not a build step. A real minifier renames local variables, drops dead code and inlines constants, and needs a parser to do it safely. esbuild or terser will beat this by a wide margin; use them where it matters.
- Automatic semicolon insertion is why line joining is conservative.
returnon its own line meansreturn;, and joining the next line onto it changes what a function returns. The joiner refuses that case, and refuses a line starting with(,[,`,+,-or/. - Minified code is unreadable in a stack trace. Ship a source map from a real build tool if you need to debug production.
- A licence banner is a legal notice, not a comment.
/*!is the convention every minifier respects, and this one keeps it. - Whitespace inside a string, a template literal or a regex is content. The tokeniser here keeps all three intact, which a regular expression based minifier cannot.
- Minifying already minified code saves nothing and can only introduce risk. Check the reported size change.
- The character count is not the transfer size. Gzip and Brotli do most of the work, and they compress repetitive whitespace very well, so the real saving from stripping it is smaller than it looks.
- Nothing here transpiles. Modern syntax stays modern syntax.
Compatibility
The tokeniser handles strings, template literals including nested ones, regular expressions, comments, numeric separators, BigInt literals, private fields and every multi-character operator through the 2022 syntax. Output is the same JavaScript with less whitespace, so it runs wherever the input did. Everything is in your browser, with no upload.