How to Minify JavaScript Safely in Your Browser
By Tools Star Hub Editorial Team · Published
Quick answer: paste your script into the JavaScript Minifier and press Minify. It runs Terser in your browser to remove comments and whitespace, apply safe compression, and shorten local variable and function names. Top-level names are kept, so code that other scripts call by name still works. If the code has a syntax error, the tool shows the error instead of producing output.
JavaScript is often the heaviest part of a web page, and the browser has to download and parse all of it before it can run. Minifying cuts the size of scripts you publish, such as widgets, bookmarklets, small libraries and inline snippets, without changing what they do.
What does minifying JavaScript do?
A JavaScript minifier parses your code into a syntax tree, then prints it back out in the shortest form it can. Whitespace and comments are dropped, and simple rewrites shorten the code, for example by joining consecutive variable declarations or removing code that can never run.
Mangling is the other big saving. Local variables and function parameters only matter inside their scope, so a long name like totalPriceWithTax can become a single letter. The program behaves the same, but the text is much shorter.
Which Terser settings does this tool use?
The tool uses Terser, a widely used JavaScript minifier, with settings chosen to stay on the safe side.
| Setting | What it means for your code |
|---|---|
| Compression on, with conservative options | Safe rewrites only. Constant expressions are not pre-evaluated and functions are not inlined |
| Mangling on | Local variable and parameter names are shortened |
| Script mode, not module | Top-level names are kept as written |
| Comments off | All comments are removed from the output |
| No source map | The output is a single block of minified code |
Because evaluation, variable reduction and inlining are turned off, the output stays closer to your original structure. You give up a little size in exchange for predictable results.
Why are top-level names not shortened?
In a classic script, a function or variable declared at the top level becomes global. Other scripts, inline onclick handlers or your own HTML may call it by name. If the minifier renamed initGallery to a, those callers would break.
So the tool treats code as a script and leaves top-level names alone, while still shortening everything inside functions. If you want global names shortened too, wrap the code in a function or move it into a module build process where you control what is exported.
What happens if my code has a syntax error?
Terser has to understand the code before it can shorten it. If parsing fails, for example because of a missing bracket or an unfinished string, the tool shows the error message and does not produce output. That is useful in itself: it is a quick way to spot a typo before you deploy.
Code written for a specific build tool, such as TypeScript type annotations or JSX, is not plain JavaScript. Compile it first, then minify the compiled output.
Will licence comments be kept?
No. All comments are removed, including licence headers. If the code you ship requires a notice, add it back to the top of the minified file by hand.
How do I debug minified JavaScript?
Minified code is hard to read and the tool does not produce a source map, which is the file browsers use to map minified code back to the original. Keep the readable source alongside the minified copy. When something fails, reproduce the bug with the original file first.
Browser developer tools can pretty-print minified code, which restores line breaks but not the original names. For anything you maintain long term, a build pipeline with source maps is the better fit, and this tool is ideal for quick, one-off jobs.
How do I test the minified script?
Swap the minified file into a test page, open the browser console and use every feature the script provides. Watch for errors that mention undefined names, which usually means some code was relying on a local name from outside its scope.
Compare the before and after character counts the tool shows to decide whether the saving is worth it. Small scripts may shrink only slightly, while heavily commented code with long names gains the most.
Is my JavaScript uploaded?
No. Terser runs inside your browser tab, so the code is not sent to a server. That makes the tool suitable for internal scripts and unreleased features. The input limit is 400,000 characters per run.
What does name mangling look like in practice?
Consider a function called formatPrice that takes a parameter named amountInCents and stores an intermediate value in a variable named dollars. After minifying, the function is still called formatPrice, because it is declared at the top level, but its parameter and its local variable become single letters such as n and t.
Property names are not mangled. If your code reads order.totalAmount, that stays order.totalAmount, because objects may come from an API, another script or JSON data where the original name is required. Strings are never changed either.
This is why mangling is safe for ordinary code. The only names that change are ones that can only be seen inside their own function.
When should I not use an online minifier?
For large applications with many files, a build tool that bundles, minifies and produces source maps is the better choice, because it repeats the same steps every time you release and keeps debugging possible. Frameworks usually do this automatically for production builds.
The online tool shines for smaller jobs: a script tag on a static site, a snippet for a tag manager, a widget you hand to a client, a userscript, or simply seeing how much smaller a file could be before deciding whether to set up a build process.
Why are some optimisations turned off?
Aggressive options can occasionally change behaviour in unusual code, such as scripts that rely on a function's exact length, its text, or side effects in an unexpected order. Turning off evaluation, variable reduction and inlining avoids those edge cases. The output may be a few characters longer than the most aggressive settings would give, but it is far less likely to surprise you.
Can I minify a script that sits inside an HTML page?
Yes. Copy the code from between the script tags, minify it here, and paste the result back. The HTML Minifier leaves script contents untouched, so doing this step separately is how you shrink inline scripts as well as the markup around them.
How to minify JavaScript online
- Paste your script. Paste plain JavaScript into the source box, or press Example to load a short sample.
- Press Minify. Terser processes the code in your browser. The result appears with character counts and the reduction.
- Read any error. If parsing fails, fix the reported problem in your source and minify again.
- Copy and test. Copy the output, drop it into a test page, and check the console while you use the features.
Example
A helper function with comments
A function with a doc comment and a long local variable name becomes one line. The comment is gone, the local variable becomes a single letter, and the function keeps its original name because it is top level.
A snippet with a missing bracket
Pasting code with an unclosed brace shows a parse error instead of output, pointing you to the mistake before it reaches production.
A bookmarklet
A short script meant to run from a browser bookmark is minified so it fits more easily into the bookmark address.
Tips and limitations
Plain JavaScript only
Compile TypeScript or JSX first, then minify the output.
No source map
Keep the original file for debugging.
Globals stay readable
Top-level names are not mangled, by design.
JSON is different
To compact JSON data rather than code, use the JSON Formatter.
FAQ
- What engine does the JavaScript Minifier use?
- It uses Terser, running in your browser, with compression and name mangling turned on.
- Are top-level function names renamed?
- No. The code is treated as a classic script, so top-level names are kept and only local names are shortened.
- Does it remove comments?
- Yes. All comments, including licence headers, are removed.
- Does it generate a source map?
- No. Keep your original source for debugging.
- What happens if my code has an error?
- The tool shows the parse error and produces no output until the code is fixed.
- Can I minify TypeScript or JSX?
- Not directly. Compile them to plain JavaScript first, then minify the result.
- Does it inline functions or pre-calculate constants?
- No. Inlining and evaluation are turned off to keep the output close to the original logic.
- How much JavaScript can I minify in one go?
- Up to 400,000 characters per run.
- Will minified code run faster?
- It mainly downloads and parses faster. Run-time speed is usually about the same.
- Is my code sent anywhere?
- No. Minification happens locally in your browser.
- Should I minify during local development?
- Keep readable sources while coding; minify for production builds or bandwidth checks.
- Does minification replace a bundler?
- No—bundlers resolve modules and trees; minifiers mainly shrink already-bundled output.
- Will const and let be rewritten to var?
- Modern minifiers usually keep block scoping; they compress names and whitespace instead.
- Can I minify already-minified vendor files again?
- Re-minifying rarely helps and can break files that expect specific formatting.
- How do license comments survive?
- Some tools keep @license banners when configured; this quick minify may strip all comments.
- Is Unicode in strings safe?
- Yes—string contents remain; only identifiers and whitespace around code are compressed.
- What about template literals with spacing?
- Spaces inside template strings stay; only outer code formatting is removed.
- Should source maps ship to users?
- Keep maps private or on protected URLs if you generate them elsewhere; this tool may not emit maps.
- Can minified code hide secrets?
- No—minification is not encryption; never put API secrets in front-end JavaScript.
- Why did a regex break after minify?
- Rare parser edge cases happen—compare the original, fix the pattern, and minify again.
Shrink your scripts with the free JavaScript Minifier.
Minify stylesheets with the CSS Minifier.
Minify markup with the HTML Minifier.