Tree Shaking이란?
Tree Shaking은 자바스크립트 번들러(Webpack, Rollup, esbuild 등)가 실제로 사용되지 않는 코드를 찾아내 최종 번들에서 제거하는 최적화 기법입니다. 이름 그대로 나무를 흔들면 마른 잎이 떨어지듯, 코드 전체를 흔들어서 ‘쓰이지 않는 죽은 코드(Dead Code)’만 털어낸다는 의미에서 붙여진 이름입니다.
예를 들어 유틸리티 라이브러리에서 함수 10개 중 2개만 사용한다면, Tree Shaking은 나머지 8개 함수를 번들에서 제외시켜 파일 크기를 줄여줍니다. 이는 사용자가 다운로드해야 할 자바스크립트 용량을 줄여 웹사이트 로딩 속도를 개선하는 데 직접적으로 기여합니다.
동작 원리: ES Module과 정적 분석
Tree Shaking이 가능하려면 번들러가 어떤 코드가 사용되고 어떤 코드가 사용되지 않는지 ‘정적으로’ 분석할 수 있어야 합니다. 이때 핵심이 되는 것이 ES Module(ESM)의 import/export 문법입니다.
CommonJS 방식인 require는 코드 실행 중(런타임)에 동적으로 모듈을 불러올 수 있어 분석이 어렵지만, ESM의 import는 코드를 실행하지 않고도 어떤 모듈에서 어떤 값을 가져오는지 미리 파악할 수 있습니다.
import { debounce } from 'lodash-es'처럼 특정 함수만 import하면 번들러는 debounce 함수만 포함시키고 나머지는 제거합니다.- 반대로
import _ from 'lodash'처럼 라이브러리 전체를 가져오면 어떤 함수가 쓰일지 정적으로 판단하기 어려워 Tree Shaking이 제대로 동작하지 않을 수 있습니다.
또한 번들러는 부수 효과(side effect)가 없는 코드인지도 함께 판단합니다. package.json에 'sideEffects': false를 명시하면, 번들러에게 ‘이 모듈은 import만 하고 사용하지 않으면 안전하게 제거해도 된다’는 신호를 주는 것입니다.
실무에서 왜 중요한가
실무에서는 리액트, 뷰 같은 프레임워크나 lodash 같은 유틸리티 라이브러리를 통째로 가져오는 실수를 하기 쉽습니다. 이럴 경우 실제 사용하는 기능은 일부인데도 번들 크기가 불필요하게 커져 초기 로딩 속도가 느려지고, 결과적으로 사용자 이탈률에도 영향을 줄 수 있습니다.
Tree Shaking을 제대로 활용하려면 필요한 함수만 named import로 가져오는 습관, 라이브러리가 ESM을 지원하는지 확인하는 습관이 중요합니다. 번들 크기를 분석해주는 webpack-bundle-analyzer 같은 도구로 실제 제거가 잘 되고 있는지 확인하는 것도 좋은 방법입니다.