Tree Shaking은 ES module static import 분석으로 사용하지 않는 export를 번들에서 제거합니다.

📋 조건

• ESM (import/export) — CommonJS require는 분석 어려움
• package.json "sideEffects": false 또는 파일 목록
• bundler (webpack, rollup, esbuild, turbopack)

🛠️ 실무 팁

// ❌ lodash 전체
import _ from 'lodash';

// ✅ 필요 함수만
import debounce from 'lodash/debounce';

• barrel file (index.ts re-export all) — shaking 방해 가능 → direct import
• ESM friendly

📦 sideEffects 예

• polyfill import
• CSS import
• 전역 register (import './instrument') → "sideEffects": ["*.css", "./instrument.ts"]

🔎 확인

• bundle analyzer에서 library size
• import { Button } from 'ui-lib' vs ui-lib/Button

🔗 참고 자료

• webpack Tree Shaking — ESM과 sideEffects로 미사용 코드를 제거하는 가이드다.
• MDN: Tree shaking — 트리 셰이킹 개념을 짧게 정의한다.
• Rollup treeshake — Rollup의 tree-shake 옵션을 설명한다.