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