JavaScript Minifier
Minify JavaScript locally with Terser profiles and raw-versus-gzip size comparisons, plus syntax diagnostics and source-map exposure warnings.{{ values.minified_code }}
| Measure | Source | Minified | Change | Copy |
|---|---|---|---|---|
| {{ row.measure }} | {{ row.source }} | {{ row.minified }} | {{ row.change }} |
| Setting | Applied value | Review note | Copy |
|---|---|---|---|
| {{ row.setting }} | {{ row.value }} | {{ row.note }} |
{{ values.source_map }}
Introduction
JavaScript minification is a source-to-source compilation step. A parser reads the program, compression rules simplify expressions and remove unreachable or unused work, an optional mangling pass shortens eligible names, and a printer emits compact JavaScript. The result can look very different while preserving the behavior allowed by the selected options.
That last qualification matters. Whitespace removal is usually the least invasive path. Semantic compression can fold constants, combine expressions, and discard code whose result is not used. Name mangling assumes that shortened local names are not reached through undocumented reflection or string-based conventions. Top-level optimization goes further by treating the outer scope as closed, which is suitable for an owned module or bundle but risky when classic-script globals form a public interface.
Minification also sits inside a delivery chain. A syntax target must match the runtime that will execute the code. License notices may need to remain in distributed files. Source maps improve debugging but can reveal original source and names. Removing console calls can erase diagnostics and, in unusual code, observable argument side effects.
- Classic script can expose top-level names through the global environment and may depend on load order.
- ES module has module scope and explicit imports or exports; closed top-level optimization is a more natural assumption.
- TypeScript and JSX are authoring syntaxes that must be compiled to JavaScript before an ordinary JavaScript minifier can process them.
Raw byte savings and network savings are related but not equal. Repeated names and punctuation compress well under gzip, so a large raw reduction may become a smaller transfer reduction. Measure both when delivery size is the goal, and test behavior independently because byte counts cannot prove correctness.
A reliable release uses the narrowest profile that meets the size requirement, keeps legal notices that must ship, and runs the minified result through the same tests and runtime checks as the readable source.
How to Use This Tool:
Set the program boundary first; optimization choices are safe only when that boundary is accurate.
- Choose Source format. Auto detect selects ES module mode only when static
importorexportsyntax is found; pin the mode when the source is intentionally ambiguous. - Paste or load JavaScript up to 1 MiB. Compile TypeScript or JSX first, then correct any reported line-and-column syntax error before reviewing size results.
- Select Safe compression, Production bundle, or Whitespace only. Use the bundle profile for code you own and test as a closed release unit, because eligible names may be shortened.
- Review comment, syntax, top-level, console, character, and source-map choices in Advanced. Leave top-level names and console calls intact unless the delivery contract explicitly permits changing them.
- Compare the raw and gzip figures, then run the minified code in the intended runtime. A successful parse and a smaller file do not replace unit, integration, and smoke tests.
Interpreting Results:
The minified code is the artifact to execute. Use Size profile for the byte comparison and Option audit to confirm the scope assumptions that produced it.
- Raw reduction measures UTF-8 source text before and after minification.
- Gzip reduction is a browser-generated estimate for each text independently. It is useful for comparison but may differ from the production server's compression level, headers, bundling, or dictionary behavior.
- An auto-detected classic script is not proof that the code has no module assumptions; it only means the detector did not find the static syntax it recognizes.
- A warning calls for review, while a parser error means no usable minified artifact was produced.
Technical Details:
Parser-backed minification works on JavaScript syntax rather than deleting characters blindly. The selected profile controls which optimizer stages are enabled, while module and top-level settings define how much of the outer scope may be treated as private.
Transformation Core
| Profile or option | Transformation | Review boundary |
|---|---|---|
| Whitespace only | Disables compression rewrites and name mangling, then prints compact syntax. | Comments and output syntax policy still affect the artifact. |
| Safe compression | Runs one standard compression pass without mangling and keeps function and class names readable. | Semantic compression still requires tests. |
| Production bundle | Runs two compression passes and mangles eligible local names. | Classic top-level names remain unless closed top-level optimization is selected. |
| ES module | Uses module parsing and treats the top level as closed for optimization. | The source must truly follow module semantics. |
| Remove console and debugger | Drops console calls and debugger statements during compression. | Diagnostics and some argument side effects may disappear. |
| ASCII escapes | Emits non-ASCII characters as escape sequences. | Output may grow while becoming safer for an ASCII-only delivery path. |
License-comment mode retains comments beginning with an exclamation mark. Keeping all comments preserves every comment the printer can retain; stripping all comments should be used only after license and attribution obligations are checked. A fixed ECMAScript level constrains emitted syntax, while the neutral setting does not impose an older target.
Formula Core
Raw and gzip reductions use the same percentage rule. Gzip figures appear only when the browser can create both compressed byte streams.
For example, 8,000 raw bytes reduced to 5,000 saves 3,000 bytes, or 37.5%. If the same texts gzip to 2,400 and 1,900 bytes, the estimated transfer saving is 500 bytes, or about 20.8%.
Source-map generation produces an external map named from the sanitized download stem and includes original source text. The filename stem affects generated filenames only; it does not change the JavaScript program.
Meaningful comparisons keep the source format, minify profile, comment policy, ECMAScript target, top-level scope, console policy, character policy, and source-map setting fixed. Changing any of them changes both the artifact and the byte accounting.
Release and Privacy Notes:
Source is minified in the browser after the required minifier runtime loads. The JavaScript text is not uploaded for processing, but copied code, downloaded files, browser extensions, and local device access remain ordinary exposure paths.
- Treat source maps as source disclosure artifacts because they may contain original code and names.
- Do not use a production-bundle result until the owned bundle passes behavior tests.
- Check required licenses before removing comments.
- Verify the selected syntax in the oldest supported runtime; an emission target is not a full compatibility test.
FAQ:
Why did TypeScript or JSX fail?
Those syntaxes need a compile step before JavaScript minification. Supply the emitted JavaScript rather than type annotations, interfaces, or JSX markup.
Why is the gzip estimate unavailable?
The current browser could not create gzip streams for measurement. Raw UTF-8 figures remain valid, and the production server or build system can provide the authoritative transfer size.
References:
- Terser minify options, Terser documentation.
- ECMA-426 Source Map Format Specification, Ecma International.
- JavaScript modules, MDN Web Docs.
- Compression Streams API, MDN Web Docs.