---
id: wiki-2026-0508-code-minification
title: Code Minification
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Minification, JS Minify, CSS Minify, Bundle Minification]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [build, performance, javascript, web]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: esbuild/swc/terser
---

# Code Minification

## 매 한 줄
> **"매 source code 의 semantic 보존 + size 의 minimize"**. 매 whitespace/comment 제거 + identifier rename + dead code elimination + constant folding. 2026 의 esbuild/SWC/OXC 의 native-speed mainstream, Terser 의 max compression fallback.

## 매 핵심

### 매 변환 단계
- **Strip**: whitespace, comments, semicolon redundancy.
- **Mangle**: local identifier → 매 short (a, b, c).
- **Compress**: constant fold, DCE, inline single-use, sequence expression.
- **Property mangle** (optional): `obj.privateField` → `obj.a` (매 risky).

### 매 Tree shaking
- ES module static imports 의 분석 → 매 unused exports 의 제거.
- `sideEffects: false` in package.json 의 강력한 hint.

### 매 Source maps
- Mangled output 의 production debugging 의 essential.
- `//# sourceMappingURL=app.js.map` + Sentry/DataDog upload.

### 매 응용
1. JS bundle 의 70-80% 크기 reduction (gzip 후 추가).
2. CSS 의 50% reduction (whitespace + selector merging).
3. HTML 의 inline asset minification (Astro, Next).

## 💻 패턴

### esbuild (fastest, default for new)
```javascript
// build.mjs
import { build } from 'esbuild';
await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  minify: true,            // whitespace + identifier + syntax
  sourcemap: true,
  target: ['es2022'],
  treeShaking: true,
  outfile: 'dist/app.js',
});
```

### SWC (Rust, used by Next/Parcel)
```javascript
// .swcrc
{
  "jsc": { "target": "es2022", "minify": { "compress": true, "mangle": true } },
  "minify": true,
  "sourceMaps": true
}
```

### Terser (max compression, slower)
```javascript
import { minify } from 'terser';
const out = await minify(src, {
  compress: { passes: 3, pure_getters: true, unsafe_arrows: true },
  mangle: { properties: { regex: /^_/ } },  // 매 only _-prefixed
  format: { comments: false },
  sourceMap: { url: 'app.js.map' },
});
```

### Vite production
```javascript
// vite.config.ts
export default {
  build: {
    minify: 'esbuild',           // or 'terser' for max
    sourcemap: true,
    rollupOptions: {
      output: { manualChunks: { vendor: ['react', 'react-dom'] } },
    },
  },
};
```

### CSS — Lightning CSS
```javascript
import { transform } from 'lightningcss';
const { code } = transform({
  filename: 'style.css',
  code: Buffer.from(src),
  minify: true,
  targets: { chrome: 100 << 16, safari: 16 << 16 },
});
```

### Sentry source map upload
```bash
sentry-cli sourcemaps inject ./dist
sentry-cli sourcemaps upload --release "$VERSION" ./dist
# 매 production 에 .map 의 ship 의 X — Sentry 의 server-side 보관
```

### DCE / pure annotation
```javascript
// 매 tree shaker 에 hint
const heavyConst = /*#__PURE__*/ buildHeavy();
// 매 unused → bundle 에서 제거
```

## 매 결정 기준
| 상황 | Tool |
|---|---|
| Default new project | esbuild / SWC |
| Maximum compression | Terser (passes: 3) |
| CSS | Lightning CSS |
| HTML | html-minifier-terser |
| Library publish | Rollup + esbuild minify |
| Browser extension | esbuild (size budget) |

**기본값**: esbuild minify + tree shake + source maps + Sentry upload.

## 🔗 Graph
- 부모: [[Web_Performance]]
- 변형: [[Code Splitting]] · [[Compression]]
- 응용: [[Bundle_Analysis]] · [[Source_Maps]]
- Adjacent: [[esbuild]] · [[Vite]] · [[Rollup]]

## 🤖 LLM 활용
**언제**: build config 작성, minifier option tuning, bundle analysis.
**언제 X**: 매 generated bundle 의 manual edit — 매 source 의 수정 후 rebuild.

## ❌ 안티패턴
- **No source map in prod**: 매 stack trace 의 obfuscated — debug 불가.
- **Property mangle without test**: 매 `obj["field"]` access 의 break.
- **Minify before bundling**: 매 cross-module DCE 의 손실.
- **Comments preserved**: license 의 `/*! */` 만 keep, rest strip.
- **One huge bundle**: code split 의 X — initial load 의 huge.

## 🧪 검증 / 중복
- Verified (esbuild docs, Terser README, Vite docs, Lightning CSS docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — esbuild/SWC/Terser/Lightning CSS patterns + DCE |