JavaScript Minifier & Beautifier
Compress or beautify JavaScript code with customizable options
JavaScript Minifier & Beautifier Documentation
What is this tool?
JavaScript minification removes whitespace, comments, and unnecessary tokens from JS source while preserving runtime semantics. Unlike CSS, JS minification must respect Automatic Semicolon Insertion (ASI) rules: removing certain newlines between statements can silently change program behavior. This tool applies conservative whitespace removal that preserves all ASI-sensitive newlines, alongside full comment stripping (// and /* */) while leaving string and regex literal content untouched.
Key Features
- Whitespace and comment removal: strips all inter-statement whitespace, blank lines, // single-line comments, and /* */ multi-line comments. Preserves whitespace inside string literals (“hello world”), template literals (`${x} text`), and regular expression literals (/a b/g).
- ASI-safe newline handling: retains newlines before statements beginning with (, [, /, +, - to prevent ASI-triggered behavior changes in the minified output; conservative approach avoids silent semantic breakage.
- No variable renaming / mangling: unlike production minifiers (Terser, UglifyJS), this tool does not rename local variables to single letters. Renames would require full AST parsing, scope analysis, and source map generation—out of scope for a client-side browser tool.
- ES6+ and modern syntax support: handles arrow functions, destructuring, template literals, optional chaining (?.), nullish coalescing (??), and class syntax without mangling; operates as a text-level transformer rather than a full parser.
- Configurable beautifier: re-indents using 2-space, 4-space, or tab indent; restores line breaks after {, }, ;, and before // comments; normalizes quote style (single/double/backtick selection); handles nested function and class structures.
Common Use Cases
- Development build inspection: paste production-minified JS (React, Vue, Angular bundles) into the beautifier to inspect component structure, locate function definitions, or read error-message strings during debugging without a source map.
- Quick one-off minification: reduce inline JS in HTML pages or small script blocks for ad hoc deployment without configuring a Webpack/Rollup build chain.
- Security analysis and code review: beautify obfuscated or minified third-party scripts to evaluate what code is being loaded on a page; inspect polyfills, analytics snippets, or A/B testing scripts.
- Size estimation: compare before/after byte counts to estimate how much a dedicated minifier (Terser) with variable mangling would further reduce vs. whitespace-only stripping.
How to Use JavaScript Minifier
The tool operates in two modes: Minify reduces file size by stripping all comments and unnecessary whitespace; Beautify (also called prettify or format) reformats compact or unreadable code with consistent indentation.
To Compress JavaScript:
- Paste your JavaScript source into the input panel, or upload a .js file using the file upload button.
- Click the “Minify” button. The tool strips whitespace and comments while preserving string content and ASI-safe newlines.
- Copy the minified output or download it as a .js file. The size reduction percentage is displayed below the output panel.
To Format/Beautify JavaScript:
- Paste minified or poorly formatted JavaScript into the input panel.
- Select your preferred indent style (2 spaces, 4 spaces, or tab) from the Options panel, then click “Beautify”.
- The formatted output appears in the output panel. Copy or download the result for further editing.
Why minify JavaScript?
JavaScript minification reduces the size of script files delivered to browsers, decreasing Time to First Byte (TTFB) and Time to Interactive (TTI). For large single-page applications, the main bundle can be several hundred KB; whitespace-only minification typically reduces this by 20-40%, and combining with variable mangling (Terser) achieves 40-65% reduction. Gzip on top of minified JS adds another 60-75% transfer compression.
Minified JS also reduces V8/SpiderMonkey parse time: the JavaScript engine must tokenize and parse every byte of source, so fewer bytes means faster parse + compile. For mobile devices on cellular connections, each KB saved measurably improves First Input Delay (FID) and Interaction to Next Paint (INP) Core Web Vitals scores.
Beautification Adjustments
The beautifier reconstructs readable indentation from minified or compacted JavaScript, handling nested functions, classes, and control structures. It does not evaluate or execute code.
- Configurable indent: 2-space, 4-space, or tab characters
- Line breaks inserted after {, }, ;, and before // comments
- Quote style normalization: convert single/double/backtick quotes
- Nested function and class structure preserved with increasing indent levels
Minification Adjustments
Minification applies several text-level transformation passes to reduce byte count without changing runtime behavior.
- All // single-line comments removed (full line and end-of-line)
- All /* */ multi-line comments removed (including JSDoc blocks)
- Inter-statement whitespace and blank lines collapsed or removed
- ASI-sensitive newlines before (, [, /, +, - retained
- String, template literal, and regex literal content left unmodified
Estimated File Size Impact
Text-level minification (whitespace + comments only) typically achieves 20-40% reduction on unminified JS source. Adding variable mangling (Terser) brings total reduction to 40-65%. Gzip on top of minified JS achieves an additional 60-75% transfer compression, yielding 85-90% combined reduction vs. raw unminified source for typical application bundles.
Related Tools
CSS Minifier & Beautifier
Compress or beautify CSS code, remove whitespace and comments to optimize file size, or format code for readability
HTML Minifier & Beautifier
Compress or beautify HTML code, remove whitespace and comments to optimize file size, or format code for readability
JSON Formatter
Format and validate JSON data for improved readability and debugging
XML Formatter
Format and validate XML data with syntax highlighting
Regex Tester
Test and debug regular expressions with instant match results
Text Diff Checker
Compare differences between two texts or files with side-by-side highlighted view