Minify vs Bundle vs Tree-shake: 각각 무엇을 하는지

빌드 파이프라인이 이 용어를 흐리게 합니다. 각각 다른 일을 하고 보통 셋 다 원합니다.

Minify

행동을 바꾸지 않는 모든 것 제거: 공백, 주석, 긴 이름.

// 이전

function calculateTotal(items) { return items.reduce((s, i) => s + i.price, 0); }
// 이후
function c(a){return a.reduce((c,a)=>c+a.price,0)}

gzip 위에 추가로 30-50% 절감.

Bundle

여러 파일을 더 적은 HTTP 요청으로 연결. HTTP/2로 덜 중요해졌지만 여전히:

• 모듈 import 해결
• ESM을 구 런타임 형식으로 변환
• 코드 분할

Tree-shake

import됐지만 실행되지 않는 코드 제거. ESM 필요.

전제 조건: ESM, top-level 사이드 이펙트 없음, "sideEffects": false.

결합 순서

1. Bundle

2. Tree-shake

3. Minify

4. Compress (서버 gzip/brotli)

모던 기본값

Vite, esbuild, webpack, Bun 모두 기본 적용.