JavaScript Minifier

The JavaScript Minifier compresses JavaScript code for production deployment — typically 30-50% smaller than source. Uses Terser-style optimizations: remove whitespace and comments, shorten variable names (mangling), dead code elimination, constant folding, function inlining, and unused imports removal. Handles modern JavaScript (ES2015+ syntax), TypeScript output, JSX compilation output, and CommonJS/ESM modules. Produces code that runs identically to source but dramatically smaller for network transfer.

JavaScript minification is critical for production performance — JS bundles are typically the largest and most render-blocking resource on a page. A 500KB source bundle minified to 200KB saves 300KB per page load, improving Time to Interactive (TTI) and First Input Delay (FID). Combined with gzip/brotli compression, the wire transfer can be 90%+ smaller than source. Modern build tools (Webpack, Vite, Rollup, esbuild) minify automatically — this tool is for ad-hoc minification: single files, legacy codebases, browser-loaded scripts outside a build pipeline, or understanding what minification does to your code.

JavaScript minification applies many optimizations. Typical result: 30-50% smaller than source.

Whitespace and comments:

- Remove all unnecessary whitespace.
- Remove comments (except /*! license */ style).
- Semicolons not always required — some minifiers use ASI (Automatic Semicolon Insertion).

Variable name mangling:

Rename local variables to short names:

```js
// Before
function calculateTotal(price, taxRate, discount) {
const withTax = price * (1 + taxRate);
const final = withTax - discount;
return final;
}

// After (mangled)
function calculateTotal(a,b,c){const d=a*(1+b);return d-c}
```

- Top-level names not mangled by default (preserved for external API).
- Properties mangled optionally (aggressive mode).
- Names kept short but unique per scope.

Dead code elimination:

```js
// Before
if (false) {
neverRuns();
}
const unused = 5;

// After
// (entire dead code block removed)
```

Constant folding:

```js
// Before
const ten = 10;
const result = 2 * 10 + 5;

// After
const a=25;
```

Function inlining:

Small functions may be inlined at call sites if only used once.

Conditional simplification:

```js
// Before
if (x === true) { foo(); } else { bar(); }

// After
x===true?foo():bar();
// Or even: x?foo():bar(); (if safe)
```

Property shorthand and destructuring (kept):

Modern syntax preserved — not converted back. Some older minifiers converted ES2015+ to ES5 but modern minifiers keep modern output.

What is preserved:

- Observable behavior identical to source.
- /*! */ license comments.
- Strings, regex, and template literals exact content.
- Object property names (unless aggressive mangling enabled).
- Function names (unless toplevel mangling enabled).

What changes:

- Variable names (mangled).
- Whitespace (removed).
- Comments (removed, except license).
- Unused code (removed).
- Expression ordering (optimized).

Build tool comparison (typical output size for same source):

- esbuild: very fast, basic minification.
- SWC: Rust-based, fast, comparable to esbuild.
- Terser: slower but best compression.
- Babel-minify: slower, good compression but less maintained.
- UglifyJS: legacy, ES5 only.

This tool uses Terser-compatible approach.

Source maps:

Production: serve minified JS. For debugging: include source maps (.map files) that browsers use to show original code in DevTools. This tool focuses on minification; generate source maps with build tools.

Performance optimizations:

Some minifiers include additional code optimizations:

- Loop unrolling for small loops.
- Hoisting declarations.
- Converting for-loops to forEach/map when shorter.

These are less common — focus is usually on size reduction without changing semantics.

Edge cases:

- eval(): minifier cannot fully analyze code inside eval. Typically preserves.
- with(): same issue — preserved.
- Object property access as dynamic: obj["name"] vs obj.name. Minifier may convert if static.
- JSX: expected to be compiled before minification. JSX source is not valid JS.
- TypeScript: compile to JS first, then minify.

Size comparison:

Typical React app:
- Source: 2MB (development bundle)
- Minified: 500KB (75% reduction)
- Gzipped: 150KB (92% total reduction)

The combined minification + gzip is the real production savings.

JavaScript Minifier vs Formatter: Minifier compresses for production. Formatter expands for readability. Opposite operations, lossless roundtrip (though formatter cannot restore original comments from minified).

Terser vs UglifyJS: Terser is the modern standard — supports ES2015+. UglifyJS is legacy, ES5 only. Most build tools use Terser.

esbuild vs Terser: esbuild is much faster (100x) but slightly less compression. Terser wins on size; esbuild wins on speed. Most modern build tools use esbuild for dev, Terser for production.

SWC vs Terser: SWC is Rust-based, fast like esbuild, good compression. Drop-in replacement for Terser in some projects (Next.js uses SWC).

Manual minification vs build tools: Build tools (Webpack, Vite, Rollup) minify automatically in production mode. This tool is for ad-hoc needs: single-file scripts, legacy code, standalone tools.

Minification vs Obfuscation: Minification reduces size. Obfuscation makes code deliberately hard to read (encrypted, control-flow flattened). Minification offers light obfuscation as a side effect; true obfuscation requires dedicated tools.

Code splitting + minification: Modern build tools split code into chunks for lazy loading. Minification + code splitting + gzip = optimal delivery.