JavaScript Minifier — Compress JS Code Online Free
Minify your JavaScript code instantly with our free online JS Minifier. Paste your code, click minify, and get a compressed version that's ready for production. Remove whitespace, strip comments, shorten variable names, and reduce file size by up to 80% — all without installing any build tools or dependencies.
What is JavaScript Minification?
Minification (also called"uglification" or"compression") is the process of removing all unnecessary characters from JavaScript source code without changing its behavior. The goal is to reduce file size so the code downloads faster over the network, improving page load performance.
A minified file is functionally identical to the original — it produces exactly the same output. The difference is purely in presentation: the human-readable formatting is removed because browsers don't need whitespace, comments, or meaningful variable names to execute code.
What Gets Removed During Minification
A JavaScript minifier applies several transformations to reduce code size:
- Whitespace and indentation: All spaces, tabs, and line breaks that don't affect execution are removed. Multiple statements are joined on a single line.
- Comments: Single-line (//) and multi-line (/* */) comments are stripped entirely. They're valuable for developers but useless at runtime.
- Variable name shortening (mangling): Local variable and function names are replaced with shorter alternatives (a, b, c, etc.). Only safe renames are performed — globals and exports keep their original names.
- Dead code elimination: Unreachable code paths (e.g., after a return statement, inside
if(false)) are removed entirely. - Constant folding: Compile-time computable expressions are pre-calculated (e.g.,
2 * 3becomes6). - Boolean simplification:
true→!0,false→!1(saves characters). - Redundant syntax removal: Unnecessary semicolons, parentheses, and braces are removed where safe.
File Size Savings — Before & After
| Library | Original | Minified | + Gzip | Reduction |
|---|---|---|---|---|
| jQuery 3.7 | 289 KB | 87 KB | 30 KB | ~90% |
| React 18 | 72 KB | 8 KB | 3 KB | ~96% |
| Lodash | 544 KB | 71 KB | 25 KB | ~95% |
| Vue 3 | 400 KB | 63 KB | 23 KB | ~94% |
| Typical app bundle | 500 KB | 150 KB | 50 KB | ~90% |
Minification alone typically saves 30-70%. Combined with gzip/Brotli compression (which your server should enable), total network transfer reductions reach 85-96%.
Build Tools for Minification
For production workflows, minification is typically integrated into your build process. Here are the most popular tools:
- Terser: The modern standard. Full ES6+ support, tree-shaking-aware, used by webpack and Vite by default. Excellent compression with configurable options. Successor to UglifyJS.
- esbuild: Written in Go, extremely fast (10-100× faster than Terser). Great compression quality. Increasingly adopted as the default in modern toolchains like Vite.
- SWC: Written in Rust, blazing fast. Used by Next.js and Turbopack. Handles both transpilation and minification in a single pass.
- UglifyJS: The legacy option. Only supports ES5 syntax (requires Babel transpilation first for modern JS). Still used in older projects but not recommended for new work.
- Google Closure Compiler: The most aggressive optimizer. Performs advanced optimizations like cross-module code motion and property flattening. Requires type annotations for maximum benefit.
Source Maps — Debugging Minified Code
Minified code is nearly impossible to debug directly — variable names are meaningless and everything is on one line. Source maps solve this by creating a mapping file (.js.map) that connects minified code positions back to original source locations.
With source maps enabled, browser DevTools automatically display your original source code with proper formatting, variable names, and line numbers — even though the browser is executing minified code. Here's how to use them:
- Generate source maps during your build:
terser input.js --source-map --output output.min.js - The minified file ends with:
//# sourceMappingURL=output.min.js.map - Upload
.mapfiles to your server or error tracking service (Sentry, Bugsnag) - For security, restrict
.mapfile access to developers only (don't serve to public)
When to Minify JavaScript
- Always for production: Every production website should serve minified JavaScript. It's a free performance win with no downsides.
- Never for development: Keep source readable during development. Your build tool should handle the switch automatically.
- Before CDN deployment: Ensure all assets on your CDN are minified and compressed.
- Third-party scripts: If embedding external scripts, use the
.min.jsversion when available. - NPM packages: If publishing a library, ship both minified (for direct browser use) and unminified (for bundler consumers) versions.
Minification Best Practices
- Automate it: Never minify manually. Use build tools (webpack, Vite, Rollup) that minify automatically for production builds.
- Always generate source maps: You'll need them for debugging production issues and error stack traces.
- Test minified builds: Run your test suite against the minified bundle to catch any rare minification bugs.
- Enable server compression: Minification + gzip/Brotli together achieve maximum savings.
- Don't double-minify: Minifying already-minified code wastes time and may introduce bugs without meaningful size reduction.
- Avoid eval(): Code inside
eval()strings can't be safely mangled. Avoid dynamic code evaluation. - Use tree-shaking: Combine minification with tree-shaking (dead code elimination based on ES module imports) for optimal bundle sizes.
How to Use This JS Minifier
- Paste your JavaScript code into the input editor (or upload a .js file).
- Select minification options (mangle variable names, remove console.log, etc.).
- Click"Minify" to compress your code instantly.
- Review the output — check the file size savings percentage.
- Copy the minified code or download as a .min.js file.
- Deploy the minified version to your production server.
Frequently Asked Questions
What is JavaScript minification?
JavaScript minification is the process of removing unnecessary characters from JS code without changing its functionality. This includes whitespace, line breaks, comments, and optionally shortening variable names. The result is a significantly smaller file that downloads and executes faster in the browser.
How much can minification reduce file size?
Typical minification reduces JS file size by 30-80% depending on the original code style. Well-commented code with verbose variable names sees the largest reductions. Combined with gzip/Brotli server compression, total network transfer savings can exceed 90%.
Does minification break my code?
Proper minification should never break working code. It only removes characters that don't affect execution and renames local variables safely. Rare issues can arise with code relying on Function.name, eval() with variable references, or property access via computed strings matching variable names.
What is the difference between minification and obfuscation?
Minification reduces file size while keeping the code logically readable (if reformatted). Obfuscation intentionally makes code difficult to understand by renaming all variables to meaningless strings, encoding string literals, adding fake control flow, and restructuring logic. Both reduce size, but obfuscation prioritizes protecting intellectual property.
Should I minify JavaScript for production?
Yes, always. Minification is considered a fundamental web performance best practice. Smaller files mean faster downloads, lower bandwidth costs, and better user experience. All modern frameworks (Next.js, React, Vue, Angular) include minification in their production build commands by default.
What are source maps and why do I need them?
Source maps (.map files) create a mapping between minified code and original source, enabling browser DevTools to show readable code with original variable names and line numbers during debugging. They're essential for diagnosing production bugs. Generate them during build and restrict access to developers only.
Which tools are best for JS minification?
Top choices: Terser (modern standard, ES6+ support, used by webpack), esbuild (extremely fast, written in Go, used by Vite), SWC (Rust-based, used by Next.js), and UglifyJS (legacy, ES5 only). For quick one-off needs, use our online tool above.
Can I minify ES6+ / modern JavaScript?
Yes, our tool fully supports modern JavaScript including arrow functions, template literals, destructuring, async/await, optional chaining, nullish coalescing, ES modules (import/export), and all ECMAScript 2015-2024 features. The minifier preserves all syntax while safely removing unnecessary characters.
Related Tools
- CSS Minifier — Compress CSS stylesheets for production
- HTML Formatter — Format and beautify HTML code
- JSON Formatter — Format, validate, and minify JSON data
- SQL Formatter — Format and beautify SQL queries
- Base64 Encoder — Encode and decode Base64 strings