Tinker Tools

JS Minifier Instantly

Minify JavaScript by removing whitespace, comments, and shortening code. Reduce bundle size instantly in your browser.

Minifier

How it works

1. Paste Your JavaScript

Paste your JavaScript code into the input area. The tool accepts any valid JS including ES6+, async/await, and modules.

Any JS

2. Choose Options

Select which optimizations to apply: remove single-line or multi-line comments, strip whitespace, or remove console.log statements.

Real-time

3. Copy the Result

Copy the minified JavaScript with one click. Check the stats to see how much you saved in file size and percentage.

One Click

What is JavaScript Minification?

JavaScript minification is the process of transforming JavaScript source code into the smallest possible version that still executes identically. This goes well beyond simple whitespace removal. A JavaScript minifier -- also called a compressor or uglifier -- shortens variable names, removes dead code paths, inlines constants, simplifies expressions, and strips comments and console.log statements. The result is code that is virtually unreadable by humans but functionally identical to the original. A file named app.js at 150 KB might become app.min.js at 45 KB -- a 70% reduction that directly impacts how quickly your users can load and run your application.

The distinction between minification and bundling is important because people often confuse them. Bundling takes multiple JavaScript files and combines them into one or a few files to reduce the number of HTTP requests. Minification takes a single file and makes it smaller. Modern build tools like webpack, Rollup, esbuild, and Vite do both -- they bundle your modules into chunks and then minify each chunk. But the operations are independent. You can bundle without minifying (useful during development) or minify without bundling (useful for standalone scripts). Understanding this separation helps you configure your build pipeline correctly.

Minification matters because JavaScript is expensive in two ways. First, it has to be downloaded -- and on mobile networks with limited bandwidth, large scripts take time to arrive. Second, it has to be parsed and compiled by the browser's JavaScript engine before it can run. A 1 MB JavaScript bundle takes roughly 2 seconds to parse on a mid-range mobile phone, even after it has been fully downloaded. Minification reduces both the download size and the parse time because there is simply less code to process. Tree shaking -- the removal of unused exports -- goes even further by eliminating entire modules that your application imports but never actually calls.

Key Features and Benefits

  • Variable Name Mangling — The minifier renames local variables, function parameters, and internal function names to single characters -- a, b, c, and so on. A descriptive name like userAuthenticationToken becomes just a. The mangler is scope-aware: it tracks where each variable is referenced and ensures that renaming does not change behavior. Global variables and exported names are left untouched because external code might reference them. Property names on objects are also preserved by default since they are part of the public API.
  • Dead Code Elimination — Code that can never execute gets removed. This includes unreachable statements after a return, throw, or unconditional break. It also covers branches guarded by conditions that evaluate to constants -- if (false) { ... } disappears entirely. Production builds often use environment variables to remove development-only code: if (process.env.NODE_ENV !== 'production') blocks get evaluated at build time and stripped when the condition is false. This is how React removes its development warnings in production bundles.
  • Tree Shaking of Unused Exports — When your code imports a utility library but only uses two of its fifty functions, tree shaking removes the other forty-eight. This works because ES module import/export syntax is statically analyzable -- the bundler can determine at build time exactly which exports are referenced. CommonJS require() calls are dynamic and harder to analyze, which is one of the main reasons the JavaScript ecosystem has been migrating to ES modules. Tree shaking can dramatically reduce bundle size when you use large libraries like lodash or date-fns.
  • Constant Folding and Expression Simplification — The minifier evaluates constant expressions at build time rather than leaving them for runtime. The expression 60 * 60 * 24 becomes 86400. A string concatenation like 'hello' + ' ' + 'world' becomes 'hello world'. Logical expressions with known outcomes are simplified -- true || expensive() becomes true (and the function call is removed). These optimizations are individually tiny but accumulate across a large codebase to produce measurably smaller and faster output.
  • Source Map Generation — Minified code with mangled variable names is nearly impossible to debug. Source maps fix this by mapping every character in the minified output back to its position in the original source. When an error occurs in production, your error tracking service -- Sentry, Datadog, Bugsnag -- uses the source map to show you the original file, line number, and variable names instead of the mangled mess. Generate source maps for every production build and upload them to your monitoring service. Keep them off the public web to prevent exposing your source code.
  • Multiple Compression Passes — Advanced minifiers like Terser support multiple passes over the code. The first pass applies transformations that enable further optimizations. A second pass catches opportunities created by the first. For example, inlining a function on the first pass might create a new dead code path that the second pass can eliminate. Two or three passes produce diminishing returns -- the code converges quickly -- but the extra 1-2% size reduction can matter for performance-critical applications.

How to Minify JavaScript

  1. 1

    Ensure Your Code Is Production-Ready

    Before minification, remove any debugging artifacts that should not ship to users: debugger statements, console.log calls used for development, test-only code paths. While some minifiers can strip console calls automatically via a configuration option, it is better practice to manage this explicitly through your build configuration. Make sure all tests pass on the unminified code -- minification should not fix or mask bugs.

  2. 2

    Choose Your Minifier

    Terser is the current standard for JavaScript minification. It is a maintained fork of UglifyJS that supports ES6+ syntax. esbuild -- written in Go -- is dramatically faster and handles both bundling and minification in a single tool, making it popular for large projects where build speed matters. SWC -- written in Rust -- is another fast alternative used by Next.js. For online one-off minification, paste your code into the tool and click minify. For build pipelines, configure your bundler to use one of these tools during production builds.

  3. 3

    Configure Minification Options

    Most minifiers default to safe settings, but you can tune them for your needs. Enable name mangling (on by default in Terser) for maximum size reduction. Enable dead code elimination and set the appropriate environment variables so that development-only branches get removed. If you use eval() -- which you should avoid when possible -- disable name mangling for the scope containing the eval since mangled names will break dynamic code evaluation. If your code relies on function.name for reflection, configure the minifier to preserve function names.

  4. 4

    Generate and Manage Source Maps

    Always generate source maps for production builds. Configure the mapping to use relative paths so the maps work regardless of where the build artifacts are hosted. Upload source maps to your error tracking service during your CI/CD pipeline -- most services provide a CLI or API for this. Do not serve source maps publicly unless you want anyone to read your original source code. You can configure your bundler to generate the maps as separate files and exclude them from your public deployment while still making them available to your monitoring tools.

  5. 5

    Verify the Minified Output

    Run your test suite against the minified bundle to catch mangling issues. Common problems include: relying on variable names in error messages (mangled names make these meaningless), property access via strings that do not match mangled names, and Angular dependency injection that uses parameter names for resolution (modern Angular uses decorators to avoid this). Check the output file size and compare it against your performance budget. A JavaScript budget of 200-300 KB compressed is a reasonable target for a modern web application.

Expert Tips for JavaScript Minification

The relationship between minification and code splitting deserves careful thought. Code splitting divides your application into chunks that load on demand -- a user visiting your homepage does not need to download the code for the settings page. Each chunk should be individually minified. But chunk boundaries also affect tree shaking: if module A and module B both import a utility, the bundler needs to decide whether to include the utility in both chunks (duplication) or extract it into a shared chunk (extra request). Minification runs after this decision is made, so the chunk strategy determines what the minifier has to work with. Getting code splitting right -- and then minifying each chunk -- produces the best combination of small initial load and efficient caching.

Be cautious with aggressive minification of third-party libraries. Some libraries rely on function names, constructor names, or specific prototype chains that mangling can break. Angular's old dependency injection system is the classic example, but similar patterns exist in serialization libraries, ORMs, and reflection-heavy frameworks. If you encounter mysterious runtime errors after minification -- TypeError: x is not a constructor, Cannot read property of undefined -- the first suspect should be name mangling interacting badly with code that inspects names at runtime. The fix is usually a targeted exclusion in your minifier config rather than disabling mangling globally.

Differential serving -- shipping ES6+ code to modern browsers and ES5 transpiled code to legacy browsers -- interacts with minification in an important way. ES6 features like arrow functions, destructuring, and template literals are already more concise than their ES5 equivalents. An arrow function (x) => x * 2 is shorter than function(x) { return x * 2; } even before minification. If you serve untranspiled ES6 to browsers that support it, your minified bundle will be smaller than the ES5 version by 10-15%. The module/nomodule pattern -- using script type=module for modern browsers and a nomodule fallback for old ones -- lets you serve both versions from the same page.

Measuring the impact of minification requires looking at three metrics: raw file size, compressed transfer size, and parse time. Raw size tells you how much the minifier removed. Transfer size (after gzip or Brotli) tells you how much your users actually download. Parse time tells you how long the browser spends converting the downloaded bytes into executable code. Tools like bundlesize, size-limit, and Lighthouse all measure these dimensions. Set budgets for each: maybe 500 KB raw, 150 KB transferred, and 100 ms parse time on a Moto G4-class device. When a new feature pushes you over budget, investigate whether the code can be split, lazy-loaded, or replaced with a smaller alternative before simply accepting the size increase.

Related Tools

CSS Minifier

Minify CSS alongside your JavaScript

HTML Minifier

Complete the frontend optimization pipeline

JSON Formatter

Format JSON config files used in build tools

JavaScript minification is the most impactful single optimization in most frontend build pipelines, but it works best as part of a complete strategy. Minify your CSS to eliminate render-blocking waste, minify your HTML to speed up initial document parsing, and keep your build tool configuration files -- often JSON -- readable with proper formatting so your team can maintain the pipeline. Each tool addresses a different layer of the stack, and together they ensure that every byte your users download is earning its place.

Frequently Asked Questions

Recommended Tools

JSON Formatter

Validate, beautify, and minify your JSON data with tree view and syntax highlighting.

URL Encoder

Quickly encode or decode URL components, parameters, and special characters safely.

Base64 Converter

Convert plain text or binary data to Base64 and back. Support for Data URIs included.