Suggest an edit

Improve this article

Refine the answer for “Code minification”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What minification is

**Minification** is the process of **removing everything unnecessary** from source code (JS, CSS, HTML)
that **does not affect the program's execution**, but **reduces file size**.

After minification, the code stays correct but becomes **as compact as possible**.

## What exactly gets removed

| What is removed | Example |
|---|---|
| Whitespace and tabs | `function test () { ... }` -> `function test(){...}` |
| Line breaks | `\n` -> removed |
| Comments | `/* description */` -> removed |
| Long variable names | `let counter = 0;` -> `let a=0;` |
| Unused code (dead code) | Removed via tree-shaking |
| Redundant semicolons, brackets | Optimized |

## Example

### Before minification:

```javascript
function sum(a, b) {
  // add two numbers
  return a + b;
}
console.log(sum(2, 3));
```

### After minification:

```javascript
function sum(n,o){return n+o}console.log(sum(2,3));
```

Before: ~90 bytes
After: ~45 bytes
Minus 50% of the size, and with gzip/brotli compression the savings are even bigger.

## How this affects speed

When loading, the browser needs to:

1. Download the JS/CSS/HTML files;
2. Parse, execute, and render the page.

The **smaller the file weight**, the:

- faster the **network latency**;
- faster the **parsing** and **execution**;
- lower the **time to first render (FCP, LCP)**;
- lower the **load on the server and CDN**.

## Benefits of minification

| Benefit | What it gives |
|---|---|
| Faster loading | Less data -> a faster page |
| Fewer requests to the server | Saves traffic |
| Faster on mobile | Reduces battery and CPU usage |
| Improved SEO | Google favors fast sites |
| Harder to read the code | Slightly raises the bar (but is not obfuscation) |

## Where it is used

Minification is applied to:

- JavaScript (`.js`)
- CSS (`.css`)
- HTML (`.html`)
- JSON and SVG (often automatically)
- Sometimes even inline scripts and styles

## How minification differs from obfuscation

| Parameter | Minification | Obfuscation |
|---|---|---|
| Goal | Reduce size | Hide the code's logic |
| Affects performance | Yes, speeds things up | No |
| Code readability | Becomes less readable | Nearly impossible to understand |
| Example tools | Terser, UglifyJS, csso | javascript-obfuscator, [obfuscator.io](http://obfuscator.io) |

## Tools

| Language | Popular tools |
|---|---|
| **JS** | [Terser](https://github.com/terser/terser), UglifyJS, SWC, esbuild |
| **CSS** | cssnano, CleanCSS, csso |
| **HTML** | html-minifier, posthtml-minifier |
| **Bundlers** | Webpack, Vite, Rollup, Parcel - do this automatically with `NODE_ENV=production` |

Example for Webpack:

```javascript
// webpack.config.js
optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin(),
    new CssMinimizerPlugin(),
  ],
}
```

## In Next.js, React, Vite, and other modern bundlers

Minification is enabled **by default** in a production build:

```javascript
npm run build
```

The bundler automatically:

- minifies JS/CSS;
- removes unused code (tree-shaking);
- applies gzip/brotli compression on deploy (for example, via Vercel/CDN).

## Example of the real-world benefit

| File type | Before minification | After minification | Savings |
|---|---|---|---|
| JS bundle | 1.2 MB | 340 KB | -72% |
| CSS bundle | 280 KB | 85 KB | -70% |
| HTML | 45 KB | 30 KB | -33% |

On a poor mobile connection, this saves **1-2 seconds of load time**!

## Summary

| What it does | Why |
|---|---|
| Removes unnecessary characters, whitespace, and comments | Reduces file size |
| Speeds up page loading | Improves UX and SEO |
| Reduces load on the network and server | Saves resources |
| Applied automatically during the build | Simple, "free" optimization |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts613 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.