Free Online JavaScript Minifier

Minify and compress JavaScript code using Terser — the industry-standard JS minifier. Remove whitespace, shorten variable names, and compress code to reduce bundle size and improve page load speed.

Related Tools

Frequently Asked Questions

Is minified JavaScript still executable?

Yes. Minified JavaScript is functionally identical to the original. Variable names may be shortened and whitespace removed, but logic and behavior are preserved.

What is the difference between minification and obfuscation?

Minification removes unnecessary characters to reduce size. Obfuscation additionally renames variables and scrambles logic to make code harder to read. Minification is for performance; obfuscation is for protection.

Can I minify ES6+ (modern JavaScript)?

Yes. This tool supports modern JavaScript including arrow functions, template literals, destructuring, and async/await syntax.

JavaScript Minification: Faster Load Times and Better Performance

JavaScript minification is one of the most impactful performance optimizations available to web developers. Modern web applications can include hundreds of kilobytes or even megabytes of JavaScript code, and every byte of that code must be downloaded, parsed, and compiled by the browser before it can execute. Minification dramatically reduces JavaScript file sizes, cutting download times, improving parse performance, and reducing the memory footprint of JavaScript on devices with limited resources particularly the mobile phones that now account for the majority of global web traffic.

What Minification Does to JavaScript

A JavaScript minifier applies a series of transformations to reduce code size. The most basic transformations remove whitespace (spaces, tabs, newlines), remove comments, and shorten variable and function names to single letters or short identifiers. A variable named userAuthenticationToken becomes a, a function named calculateMonthlyInterestRate becomes b. These renaming transformations are particularly effective because descriptive names in well written JavaScript are typically long, and minified names can be as short as one character.

More sophisticated minifiers perform additional optimizations: they eliminate dead code (branches that can never be reached), fold constants (replacing Math.PI with its numeric value), inline short functions, replace typeof checks with equivalent shorter expressions, and remove redundant code patterns. Some minifiers can even perform whole-program analysis, removing exports and code paths that are never used anywhere in the application a technique called tree shaking that is especially valuable for large libraries where only a fraction of the functionality is actually used.

The JavaScript Performance Pipeline

Minification is one step in a larger JavaScript performance optimization pipeline. The full pipeline for a modern web application typically includes: writing modular source code in JavaScript or TypeScript; bundling modules together with a tool like webpack, Rollup, Vite, or esbuild; applying tree shaking to remove unused code; transpiling modern JavaScript syntax to support older browsers using Babel or swc; and finally minifying the bundled, transpiled output. Each step contributes to reducing the amount of JavaScript the browser needs to handle.

Code splitting is a technique that complements minification by breaking a large JavaScript bundle into smaller chunks that are loaded on demand. Instead of loading all of an application's JavaScript at once, code splitting allows the browser to load only the code needed for the current page, then fetch additional chunks when the user navigates. Combined with minification, code splitting can reduce initial page load JavaScript from megabytes to tens of kilobytes, dramatically improving First Contentful Paint and Time to Interactive metrics.

Source Maps: Debugging Minified Code

Minified JavaScript is extremely difficult to read and debug — variable names are meaningless single letters and all formatting is removed. Source maps solve this problem by providing a mapping between the minified output and the original source code. When a source map is available and loaded in browser DevTools, breakpoints and error stack traces reference the original file names and line numbers rather than the minified code. This makes debugging production JavaScript as straightforward as debugging development code.

Source maps are generated alongside minified output by all major minification tools. They should be deployed to your server but not necessarily made publicly accessible — they contain your original source code, which may be proprietary. A common pattern is to upload source maps to an error tracking service like Sentry, which uses them to display readable stack traces in error reports without exposing the source code to end users. Configure your web server to block public access to .map files while still making them available to your error tracking system.

Minification Tools and Their Trade-offs

Several JavaScript minifiers are widely used in production, each with different trade offs between speed, compression ratio, and optimization sophistication. Terser is the most established option, used by webpack and many other tools, producing excellent compression with configurable optimization levels. esbuild is dramatically faster than JavaScript-based minifiers because it is written in Go, making it ideal for development builds where speed matters; its compression ratio is slightly lower than Terser's but the difference is small. SWC, written in Rust, offers similar speed advantages to esbuild. Google Closure Compiler offers the most aggressive optimizations but requires more careful configuration and is less commonly used in modern setups.

For most projects using a modern build framework like Vite, Next.js, or Create React App, minification is configured automatically with sensible defaults. Vite uses esbuild for development and Rollup with a minification plugin for production. Next.js uses swc by default with an option for Terser. The main decision is whether to use the default configuration or invest time in custom optimization for most applications, the defaults produce excellent results and custom configuration provides only marginal improvements at the cost of build pipeline complexity.

Measuring JavaScript Performance Impact

The impact of JavaScript minification on real-world performance can be measured using Lighthouse, WebPageTest, and the browser's Performance panel. The most relevant metrics are Total Blocking Time (TBT) and Time to Interactive (TTI), which measure how long JavaScript execution delays the main thread and prevents user interaction. Large unminified JavaScript bundles increase parse and compile time significantly, and on low-end mobile devices, this can add seconds to the time before a page becomes interactive. Running performance audits before and after implementing minification and comparing bundle sizes in the Network panel gives concrete data to justify the investment in optimization tooling.