Online JavaScript Minifier: Reduce JS File Size for Faster Page Loads

What Is JavaScript Minification

JavaScript minification removes characters that are not needed at runtime (whitespace, comments, and more) to shrink files. Build-chain minifiers may also mangle names, eliminate dead code, and fold constants. Paste a script into our JavaScript Minifier for syntax-level compression in the browser, with character and UTF-8 byte savings shown immediately.

Before and After

Before:

// Calculate sum of two numbers
function addNumbers(a, b) {
    // Return the sum
    var result = a + b;
    return result;
}

var x = 10;
var y = 20;
console.log(addNumbers(x, y));

After (this tool's defaults: strip comments + compact punctuation, keep identifier names):

function addNumbers(a,b){var result = a + b;return result;}var x = 10;var y = 20;console.log(addNumbers(x,y));

With Drop console.* enabled, the trailing console.log(...) disappears too. Fully mangled output such as function n(n,r){return n+r} belongs to Terser/esbuild — intentionally out of scope here so paste-and-minify keeps function names and avoids breaking runtime name lookups.

Why You Need JS Minification

1. JavaScript is often the largest payload: Scripts dominate many page transfers
2. Meaningful reduction: Hand-written source commonly shrinks by roughly 30–60% after comment/whitespace passes
3. JS is parse-blocking: Smaller files usually mean faster download and parse
4. Helps Core Web Vitals: Less script weight can shorten LCP-related waits
5. Saves CDN bandwidth: Fewer bytes, lower transfer cost
6. Mobile matters: On slow networks and mid-range CPUs, every kilobyte shows

Strategies: build pipeline vs this online tool

How to Use the Online Tool

Using ToolVault's JavaScript Minifier:

1. Paste JavaScript (runs locally — nothing is uploaded)
2. Toggle options: remove comments, drop console.*, drop debugger, compact punctuation spacing
3. Minify; the output panel shows character and UTF-8 byte savings
4. Unbalanced brackets surface a line/column hint — treat it as a clue and still verify in the page or tests
5. Use Format (Prettier) for readability; parse errors include location info

JS Minification in Build Tools

Webpack (TerserPlugin)

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            pure_funcs: ['console.log']
          },
          mangle: true
        }
      })
    ]
  }
};

Vite

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});

esbuild (Vite default)

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'esbuild' // typically an order of magnitude faster than terser
  }
});

JS Minifier Comparison

Terser: the five settings that matter

compress.drop_console strips console.log (smaller output, less noise — verify nothing reads console for control flow); dead_code + unused for elimination (much stronger with ES modules); mangle.toplevel renames top-level symbols (big size win, breaks name-based lookup such as some DI patterns); format.comments controls license retention. Safe adoption: enable one setting per release, diff the bundle, run smoke tests.

The online Drop console.* / Drop debugger toggles mirror the two switches teams flip most often, so you can estimate savings before wiring them into CI.

The tree-shaking interaction minifiers cannot fix alone

Minification shrinks what exists; tree-shaking removes what is unused — and the two are frequently confused because symptoms look identical ("bundle too big"). Tree-shaking needs ES modules and side-effect annotations ("sideEffects": false in package.json); minifying a CommonJS bundle diligently compresses every unused function you shipped. The diagnostic: if your minified bundle shrinks dramatically when you delete an import, tree-shaking was off, not minification. Named imports (import { debounce } from 'lodash-es') are a high-impact habit — barrel files that re-export everything silently defeat the mechanism.

Source maps: ship them or not

Minified code without a source map is painful in production — stack traces point at line 1 of a huge file. Generate maps at build time, upload them to an error-tracking service (or serve under a controlled path), and avoid publishing .map at predictable public URLs. The //# sourceMappingURL= comment controls discovery. Maps cost build time and disk, not runtime.

Characters vs UTF-8 bytes

The panel reports both. With CJK comments or non-ASCII strings, byte savings often exceed character savings — CDNs bill bytes. Brotli/Gzip stack on top of source minify; they do not replace it.

Balance warnings before you ship

Unbalanced braces, brackets, or parentheses usually mean the paste was truncated or a template fragment was incomplete. The online tool surfaces a balance warning so you do not treat a half-file minify as a successful compress. Fix the source first; then re-run with the same option set (comments / console / debugger / compact) and compare character versus byte deltas against the previous run.

FAQ

Can I Debug Minified Code?

Minified code is hard to read. Generate Source Maps so browser DevTools can show original sources while production still serves the minified file.

Why Remove console.log?

1. Extra bytes
2. Debug leakage in production
3. Minor runtime cost

Use terser's drop_console: true in builds; this site's optional toggle lets you estimate the win first.

Should I Choose esbuild or terser?

Prefer esbuild when raw speed dominates; use terser when you need finer mangling/compress knobs. Vite defaults to esbuild; Webpack ecosystems often ship terser. For paste-and-compare option impact, the online tool is enough.

Why Not Mangle Names Online?

Renaming exports or DI string names can break pages silently. The online tool stays predictable: keep identifiers, leave high-risk mangling to pipelines with full tests.

Triage notes

Declining to obfuscate variable names online is the article's most important tradeoff, and the FAQ explains why: once mangling renames an exported function or a string used for dependency injection, the page breaks silently — an online tool prioritizes predictable, reversible output, leaving high-risk renaming to build pipelines with real test coverage. The tree-shaking-versus-minify distinction comes with an executable diagnostic: if removing one import shrinks the minified bundle dramatically, tree-shaking wasn't working — it was never minify's fault. The Terser section's safety rhythm is equally concrete: enable one setting at a time, diff the output, run a smoke suite; characters and bytes are shown side by side because Chinese comments usually shrink more in bytes than in characters, and CDN billing counts bytes.

This guide is part of the ToolVault toolkit. More free local-first tools at the homepage.