최종 번들 크기를 줄이기 위해 사용되지 않는 코드를 제거하는 최적화 방법
주로 모듈 시스템을 기반으로 동작하며, 사용되지 않는 데드 코드를 감지하고 번들에서 제거하여 최적화
트리 쉐이킹이 작동하려면 ES 모듈 사용해야함.
ES 모듈은 정적인 구조를 가지기 때문에, 코드 분석 과정에서 어떤 모듈이 사용되고 어떤 모듈이 사용되지 않는지를 쉽게 판단할 수 있음.
반면, CommonJS같은 동적 모듈 시스템을 사용할 경우, 정확한 코드 분석이 어려워 트리 쉐이킹이 제대로 동작하지 않을 수 있음
트리 쉐이킹을 작용하려면 코드가 사이트 이펙트가 없는 순수 함수 형태로 작성되어야 함. 만약 모듈 내부에서 실행되는 코드가 전역 상태를 변경하거나 예측할 수 없는 동작을 한다면, 번들러는 해당 코드가 제거되어도 안전한지 확신할 수 없기 때문에 트리 쉐이킹이 적용되지 않을 수 있음.
이를 해결하기 위해 package.json에 'sideEffets': false를 설정하면 해당 패키지가 사이드 이펙트가 없음을 명시하여 보다 적극적으로 최적화 할 수 있음
트리 쉐이킹 어떻게 적용?
webpack, Rollup, esbuild 등의 번들러에서 트리 쉐이킹 기능을 지원함
이때 설정 방법은 번들러마다 차이가 있음
webpack의 최신버전 기준으로는 mode:'production'설정만으로 기본적 트리 쉐이킹 활성화되며, TerserPlugin같은 플러그인 추가 시 더욱 강력한 최적화 가능
트리 쉐이킹의 효과 측정 방법?
번들 크기 비교하면 됨
webpack의 bundle analyzer같은 도구 사용하면 번들 이후 코드의 양 시각적 확인 가능함. 또한 번들 파일을 직접 확인하여 원래 코드와 비교하는것도 좋은 방법
다행히 terserplugin과 bundle analyzer를 써보고 진짜 좋다 체감해서 그게 트리쉐이킹이구나까지 연결할 수 있는 좋은 내용이였던 것 같다
