JavaScript Minifier Online
Paste your JavaScript code to instantly minify or beautify it. Strips comments and unnecessary whitespace to reduce file size. Completely free and runs entirely in your browser.
Understanding JavaScript Minification
JavaScript minification is the process of removing all unnecessary characters from source code without altering its functionality. This includes stripping whitespace, line breaks, comments, and redundant syntax to produce a smaller file that executes identically to the original. Every byte saved translates directly into faster downloads for your users, lower bandwidth costs for your infrastructure, and improved Core Web Vitals scores that search engines use to rank your pages. In a world where mobile connections and emerging markets still contend with limited bandwidth, minification is one of the simplest and highest-impact performance optimizations available to web developers.
The concept of minification dates back to the early days of the web when developers manually removed whitespace to speed up page loads over dial-up connections. Today, the process is fully automated and integrated into build pipelines through tools like webpack, Rollup, Vite, and esbuild. These bundlers not only minify code but also perform tree shaking to eliminate dead code paths, scope hoisting to reduce function overhead, and code splitting to load only what each page needs. The result is a production bundle that can be dramatically smaller than the sum of its source files.
Modern minifiers go beyond simple whitespace removal. Tools such as Terser, the default minifier in webpack 5, apply a wide range of transformations: shortening variable names within safe scopes, removing unreachable code after conditional checks, folding constant expressions at compile time, and converting property access patterns into more compact equivalents. esbuild, written in Go, can minify entire projects in milliseconds by leveraging parallel processing. SWC, written in Rust, offers similar speed and is commonly paired with Next.js for both transpilation and minification.
Tool Highlights
Comment Removal
Strips single-line comments that start with double slashes and multi-line comments wrapped in slash-star delimiters. The parser is careful to preserve comments that appear inside string literals so that your code behaves identically after minification. This alone can save significant space in heavily documented codebases where inline explanations and JSDoc annotations account for a large portion of the file size.
Whitespace Compression
Collapses consecutive spaces, tabs, and newlines into the minimum whitespace required for valid JavaScript. Blank lines, trailing spaces, and excessive indentation are all eliminated. The result is a compact single-line output that retains every semicolon, bracket, and operator the JavaScript engine needs to execute the code correctly. This reduction typically accounts for the largest share of file size savings during basic minification.
Instant Beautification
Reverse the minification process with a single click. The beautifier inserts line breaks after opening braces, closing braces, and semicolons, then applies consistent indentation to produce a human-readable layout. This is invaluable when you need to inspect minified third-party code, debug a production bundle, or understand the output of a build tool. Beautification does not alter any logic or add comments — it only adjusts formatting.
Real-Time Size Statistics
Every minification operation displays the original size, minified size, and percentage savings in a clear statistics bar. Knowing exactly how much space you saved helps you evaluate whether additional optimizations like gzip compression or code splitting are worthwhile. The statistics update instantly so you can experiment with different code styles and immediately see how they affect the final output size.
Getting Started with JS Minifier
- Paste your JavaScript. Copy your source code and paste it into the input textarea above. The tool accepts any valid JavaScript, from a few lines of utility functions to thousands of lines of application logic.
- Click Minify. Press the Minify button to strip comments and whitespace. The compressed output appears in the output textarea below, and the statistics bar shows the original size, minified size, and percentage reduction.
- Or click Beautify. If you have minified code and want to make it readable again, paste it into the input and click Beautify. The tool adds line breaks and indentation to restore a clean, structured layout.
- Copy the result. Click the Copy button to send the output to your clipboard. You can then paste the minified code into your project, a build configuration, or a content delivery network.
Tree-shaking (dead code elimination) removes more unused code than minification alone. Use ES module import/export syntax so bundlers like Webpack and Rollup can statically analyze dependencies and drop entire unused modules from your final bundle.
Minifying code that uses eval() or the Function() constructor can break your application. Minifiers rename variables for shorter names, but eval accesses variables by their original names at runtime. Either avoid eval entirely or mark those files as excluded from minification.
Common Scenarios
Frontend Developer
Liam ships a single-page React app and needs to minimize bundle size for users on slow 3G connections. He minifies vendor libraries received outside his build pipeline before concatenating them with his application code.
WordPress Plugin Author
Fatima distributes a jQuery plugin that must load fast on shared hosting. She minifies the production build to under 5KB, then pastes the beautified version side-by-side to verify no logic was altered during compression.
Technical Writer
Andrei embeds JavaScript code samples in documentation and blog posts. He beautifies minified snippets from open-source libraries so readers can study the logic, then re-minifies them for the downloadable example files.
Build Tools and Performance Impact
While an online minifier is perfect for quick tasks and learning, production applications benefit from integrating minification into an automated build pipeline. Webpack remains the most widely adopted bundler in the JavaScript ecosystem, and its built-in TerserPlugin handles minification during the production build step. Rollup takes a different approach by focusing on ES module output and tree shaking, making it the preferred choice for library authors who want the smallest possible distributed package. Vite, which uses Rollup under the hood for production builds and esbuild for development, offers an exceptionally fast developer experience without sacrificing output quality.
esbuild has reshaped expectations around build speed. Where traditional JavaScript-based minifiers might take tens of seconds to process a large codebase, esbuild completes the same work in under a second by running natively compiled code across all available CPU cores. SWC provides a similar performance profile and is increasingly used as a drop-in replacement for Babel in frameworks like Next.js, handling both transpilation and minification in a single pass. For projects that need maximum speed during continuous integration, these tools can shave minutes off every deployment cycle.
The performance impact of minification extends beyond file size. Smaller scripts mean shorter parse times in the browser, which directly reduces Time to Interactive and First Input Delay metrics. On low-powered mobile devices, parsing and compiling JavaScript can take several times longer than on a desktop machine, so every kilobyte matters. Combining minification with server-side compression using Brotli or gzip can reduce transfer sizes by over eighty percent compared to uncompressed source files. This combination is considered a baseline requirement for modern web performance.
Common Questions
What is the difference between minification and uglification?
Minification removes unnecessary characters such as whitespace, comments, and newlines without changing the code's behavior. Uglification goes a step further by renaming variables and functions to shorter names, rewriting expressions, and applying other transformations that make the code harder to read. Minification is safe and reversible with a beautifier, while uglification is a one-way process that produces code which cannot be meaningfully restored to its original form. Both techniques reduce file size, but uglification achieves greater compression at the cost of readability.
Will minifying JavaScript break my code?
Basic minification that removes comments and whitespace should never break your code because it only removes characters that the JavaScript engine already ignores during execution. However, issues can arise if your code relies on specific formatting, such as parsing its own source via Function.toString(), or if there are pre-existing syntax errors that happen to be masked by certain whitespace patterns. Advanced minifiers that rename variables can cause problems if your code uses eval, relies on specific function names, or accesses properties dynamically using string concatenation. Always test your minified code before deploying it to production.
What is tree shaking and how does it relate to minification?
Tree shaking is a technique used by modern bundlers like webpack and Rollup to eliminate unused code from your final bundle. It works by analyzing the dependency graph of ES module imports and exports to determine which functions, classes, and variables are actually referenced. While minification reduces the size of the code you ship, tree shaking removes entire modules or exports that are never imported or referenced. The two techniques are complementary: tree shaking removes dead code first, then minification compresses what remains into the smallest possible output.
What are source maps and why do I need them?
Source maps are JSON files that map minified or transpiled code back to the original source code. When you minify JavaScript for production, debugging becomes difficult because error stack traces reference line numbers and column positions in the minified file, which are meaningless in the context of your original source. Source maps solve this by letting browser developer tools display the original code with correct line numbers, variable names, and file references. Most build tools generate source maps automatically during the minification step, and you can choose whether to deploy them alongside your production code or keep them private for internal debugging.
How much file size reduction can I expect from minification?
Typical minification reduces JavaScript file sizes by twenty to sixty percent, depending on the coding style and amount of comments in the original source. Code with heavy inline documentation, verbose variable names, and generous whitespace will see the largest reductions. Terse code with minimal comments may only shrink by fifteen to twenty percent. When combined with gzip or Brotli compression on the server, total transfer size reductions can exceed eighty percent compared to the original uncompressed source. The exact savings depend on your code, but minification is consistently one of the most effective single optimizations available.
Should I minify JavaScript manually or use a build tool?
For production workflows, you should use a build tool like webpack, Rollup, Vite, or esbuild that integrates minification into your automated build pipeline. This ensures that every deployment produces consistent, optimized output without manual intervention. Manual minification with an online tool is best suited for quick one-off tasks, testing, learning, or when you need to compress a single script without setting up an entire build system. Online tools are also useful for inspecting what a minifier does to your code before adding it to your build configuration, or for compressing small snippets to embed in HTML pages.
What is the difference between minification and obfuscation?
Minification is a size-reduction technique that removes whitespace, comments, and unnecessary characters while preserving code behavior. Obfuscation is a security measure that intentionally makes code difficult to understand by renaming identifiers to meaningless strings, inserting dead code, encoding string literals, and restructuring control flow. Minification improves performance and is standard practice for all production JavaScript. Obfuscation aims to protect intellectual property and deter reverse engineering but can increase file size and hurt performance. They serve different purposes but are sometimes used together in production builds that prioritize both speed and code protection.
JavaScript Bundle Size Impact
JavaScript file size directly affects page load time and user experience. Unlike images, JavaScript must be downloaded, parsed, compiled, and executed before the browser can respond to user input. The table below shows how bundle size translates to real-world load times across different network conditions.
| Bundle Size | Slow 3G (400 Kbps) | 4G LTE (12 Mbps) | WiFi (50 Mbps) | Parse Time |
|---|---|---|---|---|
| 50 KB | 1.0 s | 0.03 s | 0.008 s | ~30 ms |
| 100 KB | 2.0 s | 0.07 s | 0.016 s | ~60 ms |
| 250 KB | 5.0 s | 0.17 s | 0.04 s | ~150 ms |
| 500 KB | 10.0 s | 0.33 s | 0.08 s | ~300 ms |
| 1 MB | 20.0 s | 0.67 s | 0.16 s | ~600 ms |
| 2 MB | 40.0 s | 1.33 s | 0.32 s | ~1200 ms |
Key insight: Parse time is the hidden cost. A 1 MB bundle takes around 600 ms just to parse on a mid-range mobile device, before any code executes. On low-end devices common in emerging markets, parse time can be 2-5x longer. Google recommends keeping total JavaScript under 300 KB compressed for optimal Core Web Vitals scores.
Beyond minification: Combine minification with gzip or Brotli compression (which typically achieves 60-80% reduction), code splitting to load only what the current page needs, tree shaking to eliminate dead code, and dynamic imports to defer non-critical modules. These strategies together can reduce effective bundle sizes by over 90 percent.