트리쉐이킹(Tree-shaking)은 JavaScript 번들링 과정에서 사용되지 않는 코드를 제거해 번들 크기를 줄이는 최적화 기법입니다. 하지만 코드 구조나 도구 설정에 따라 기대한 만큼의 효과를 얻지 못하는 경우도 많기 때문에, 실제로 트리쉐이킹이 잘 적용됐는지 **진단하고 검증하는 방법**이 중요합니다. 이 글에서는 Webpack, Rollup, 바벨 환경에서 트리쉐이킹 적용 여부를 확인하고 성능을 분석하는 실전 방법을 소개합니다.
Webpack에서 트리쉐이킹 확인 방법
Webpack은 mode: 'production'일 때 기본적으로 트리쉐이킹을 수행합니다. 이를 위해 다음 조건을 만족해야 합니다:
- ESM(ES Module) 형식의 import/export 사용
sideEffects: false또는 세부 설정 적용- 최신 Webpack + Terser 플러그인 사용
Webpack 트리쉐이킹 성능을 확인하는 가장 쉬운 방법은 **webpack-bundle-analyzer** 도구를 사용하는 것입니다:
npm install --save-dev webpack-bundle-analyzer
Webpack 설정에 플러그인을 추가합니다:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'production',
plugins: [new BundleAnalyzerPlugin()],
};
분석 결과에서 각 모듈이 얼마나 번들에 포함됐는지 시각적으로 확인할 수 있으며, 실제로 사용하지 않는 모듈이 제거됐는지 확인 가능합니다. 또한 stats.json 파일을 생성해 treeShaking: true 플래그를 확인하면 Webpack이 이를 적용했는지도 알 수 있습니다.
Rollup에서 트리쉐이킹 적용 여부 분석
Rollup은 기본적으로 ESM 기반 빌드 시스템으로, **트리쉐이킹이 매우 강력하게 동작**합니다. Rollup에서 트리쉐이킹 효과를 확인하려면 다음 옵션을 사용합니다:
rollup -c --treeshake --output.sourcemap
또는 --visualize 플래그를 통해 번들 구조를 시각화할 수 있습니다. 시각화 도구 중 하나는 Rollup REPL 또는 bundlephobia입니다.
또한 --silent 옵션 없이 빌드하면 다음과 같이 불필요한 모듈이 제거됐다는 로그가 출력됩니다:
(!) Unused external imports
default imported from 'lodash' is never used
이러한 경고를 통해 트리쉐이킹이 정상 작동하는지 즉시 확인할 수 있으며, ESModule을 제대로 export하지 않는 외부 라이브러리를 감지할 수 있습니다. Rollup은 sideEffects: false가 없어도 자체 분석을 통해 데드코드를 감지합니다.
바벨, 외부 라이브러리, 타입스크립트 환경에서의 체크
Babel은 코드 변환을 담당하지만, **트리쉐이킹을 직접 수행하지는 않습니다**. 그러나 Babel 설정이 잘못되면 트리쉐이킹이 방해될 수 있습니다. 대표적으로 CommonJS 형식으로 코드를 변환하면 Webpack이나 Rollup이 트리쉐이킹을 하지 못하게 됩니다.
다음과 같은 설정은 피해야 합니다:
presets: [['@babel/preset-env', { modules: 'commonjs' }]]
대신 ESM을 유지하려면 다음처럼 설정해야 합니다:
presets: [['@babel/preset-env', { modules: false }]]
타입스크립트(tsc)는 es2015 이상의 module 옵션을 유지해야 합니다:
{
"compilerOptions": {
"module": "ESNext",
"target": "ES6"
}
}
또한 외부 라이브러리의 구조가 트리쉐이킹에 부적합한 경우도 많습니다. 이를 진단하려면 bundlephobia.com를 활용해 라이브러리 번들 크기 및 트리쉐이킹 여부를 확인할 수 있습니다. 사용하지 않는 코드가 계속 포함되는 경우, tree-shakable한 다른 대안을 검토하는 것이 좋습니다.
트리쉐이킹은 코드 최적화에 필수적인 단계이지만, 그 효과는 프로젝트 구조, 빌드 도구 설정, 외부 의존성에 따라 크게 달라집니다. Webpack과 Rollup의 시각화 도구를 적극 활용하고, Babel과 TypeScript 설정을 ESM 중심으로 유지하며, 외부 라이브러리의 구조까지 분석해야 최적의 성능을 달성할 수 있습니다. 정기적인 번들 분석과 구성 점검을 통해 트리쉐이킹 효과를 극대화해 보세요.