트리 쉐이킹

• 최종 번들 크기를 줄이기 위해 사용되지 않는 코드를 제거하는 최적화 방법
• 주로 모듈 시스템을 기반으로 동작하며 사용되지 않은 데드(dead) 코드를 감지하고 번들에게 제거하여 최적화

코드 쉐이킹 작동 조건

1. ES 모듈을 사용

   • ES 모듈은 정적인 구조를 가지기 때문에 코드 분석 과정에서 어떤 모듈이 사용되고 어떤 모듈이 사용되지 않는지를 쉽게 판단할 수 있음 (반면 commonJS 같은 동적 모듈 시스템을 사용할 경우, 정확한 코드 분석이 어려워 트리 쉐이킹이 제대로 동작하지 않을 수 있음)
     

2. 코드가 사이드 이펙트가 없는 순수 함수 형태로 작성

   만약 모듈 내부에서 실행되는 코드가 전역 상태를 변경하거나 예측할 수 없는 동작을 한다면 번들러는 해당 코드가 제거 되어도 안전하지 확신할 수 없기 때문에 트리 쉐이킹이 적용되지 않을 수 있음

   → 이를 해결하기 위해 package.json에 “sideEffects” : false를 설정하면 해당 패키지가 사이드 이펙트가 없을을 명시하여 보다 적극적으로 최적화 가능

지원하는 도구

도구	트리 쉐이킹 지원 여부
Webpack (v2 이상)	지원 (mode: 'production' 필수)
Rollup	가장 적극적이고 효율적인 트리 쉐이킹
ESBuild, Vite	빠르고 기본적으로 지원

---

Webpack에서 트리 쉐이킹 사용

1. mode: 'production'설정
   • Webpack은 mode: 'production' 으로 설정하면 자동으로 최적화 옵션들을 활성화(트리 쉐이킹 포함되어 있음)
2. package.json에 "sideEffects": false 추가
   • Webpack이 안전하게 "이 파일은 import만 해도 실행된다"는 걸 판단할 수 있도록 sideEffects 플래그를 설정
3. ES6 module(import/export) 방식으로 코드 작성

트리 쉐이킹 효과 측정 방법

• Webpack의 bundle analyzer 도구를 사용하여 시각적을 확인 가능