2nd/10_Wiki/Topics/Programming & Language/Code Minification.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-code-minification	Code Minification	10_Wiki/Topics	verified	self	Minification JS Minify CSS Minify Bundle Minification	none	A	0.9	applied	build performance javascript web		2026-05-10	pending	language framework javascript 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)

// 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)

// .swcrc
{
  "jsc": { "target": "es2022", "minify": { "compress": true, "mangle": true } },
  "minify": true,
  "sourceMaps": true
}

Terser (max compression, slower)

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

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

CSS — Lightning CSS

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

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

DCE / pure annotation

// 매 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