JavaScript Minifier — Compress JS Code Online
Minify JavaScript by removing comments and extra whitespace. Shows before/after size comparison.
About JavaScript Minifier — Compress JS Code Online
JavaScript Minifier removes comments and whitespace from JS code in real time. See Before→After byte counts and savings % on a visual bar. Copy to clipboard or download as a .js file — no sign-up, nothing sent to a server.
How to Use
- 1Paste your JavaScript into the left input area. The minified output appears on the right instantly.
- 2Toggle "Remove comments" and "Keep /*! important comments */" in the toolbar as needed.
- 3Check the reduction bar at the bottom for Before/After byte counts and savings %.
- 4Click "Copy" to copy to clipboard or "DL" to download a minified .js file.
Features
- Real-time minification — results and byte savings appear as you type
- Visual Before→After bar shows exactly how much was reduced
- Reduces JS file size to improve Core Web Vitals (LCP / TBT) scores
- Option to retain important comments (/*! ... */) for licence notices
- Runs entirely in your browser — no upload, no sign-up required
JavaScript Minification Explained
JavaScript minification reduces file size by removing unnecessary characters without changing the code's behavior. Understanding what minifiers do helps you use them confidently in production.
Whitespace Removal, Variable Renaming, and Dead Code Elimination
Basic minifiers remove whitespace (spaces, tabs, newlines) and comments, which alone can reduce file size by 20–30%. Advanced minifiers also rename local variables from descriptive names to single characters (e.g., getUserProfile becomes a), which saves bytes on every usage and reference. Dead code elimination removes unreachable code paths — for example, code after a return statement or inside if (false) { } blocks. This tool performs whitespace and comment removal only, preserving all variable names and logic exactly as written.
What Minifiers Do vs Bundlers
A minifier reduces the size of individual JS files — it does not combine files or resolve module dependencies. A bundler (like webpack, Rollup, or esbuild) resolves import/require statements, combines modules into one or more output files, and usually applies minification as a final step. For small scripts or isolated files, a standalone minifier is sufficient. For modern JavaScript applications using ES modules, use a bundler with built-in minification (webpack with TerserPlugin, Vite in production mode, or esbuild --minify) to get the full benefit of tree-shaking and code splitting.
Production JS Optimization
Minification is just one part of a production JavaScript optimization strategy. Combining it with other techniques yields the best loading performance.
Source Maps and Debugging Minified Code
Minified JavaScript is difficult to debug because variable names are shortened and formatting is removed. Source maps solve this problem by providing a mapping file (.js.map) that links minified output back to original source lines. When source maps are included, browser DevTools automatically show the original formatted code during debugging sessions even though the minified version runs in the browser. If you minify with a build tool, always generate source maps for your development and staging environments, and optionally for production with restricted access.
Minification vs Tree-shaking vs Code Splitting
Minification reduces the size of every character in your JS files. Tree-shaking (available in Rollup, webpack, and esbuild) eliminates entire exported functions and classes that are never imported — this can remove far more code than whitespace stripping alone. Code splitting breaks the bundle into smaller chunks loaded on demand, reducing the initial payload. The optimal production strategy uses all three: tree-shake to remove unused exports, code-split to defer non-critical code, then minify each chunk. CDN caching with long-lived Cache-Control headers on versioned filenames ensures users only re-download changed chunks.
FAQ
- Will minification break my JavaScript?
- The minifier only removes whitespace and comments without renaming variables or rewriting logic, so the output is functionally identical to the input.
- Does it handle ES6+ syntax?
- Yes. The tool works with modern JavaScript including arrow functions, template literals, and destructuring. Template literal content is preserved as-is.
- What is the difference between minification and obfuscation?
- Minification only removes whitespace and comments — code behaviour is unchanged. Obfuscation also renames variables to make code harder to read. This tool performs minification only.
- Does it support JSX or TypeScript?
- This tool works with plain JavaScript only. For JSX or TypeScript, transpile to JS first using Babel or tsc, then minify here.
- Should I use this in production or a build tool?
- This tool is great for quick checks and one-off files. For automated production builds, use webpack, Vite, or esbuild to minify JS as part of your pipeline.
Found a bug or something not working as expected?
Report a bug →