트리셰이킹의 개념과 작동 원리
트리셰이킹은 불필요한 자바스크립트 코드를 정적 분석을 통해 제거하는 최적화 기법입니다. 이 용어는 '나무를 흔들어 쓸모없는 잎사귀를 떨어뜨리는 것'에 비유되며, 실제 구현에서는 코드의 추상구문 트리(АST)를 기반으로 사용되지 않는 모듈이나 함수를 식별하고 삭제합니다.
이 기법은 ES6 모듈 시스템의 정적 구조성에 의존합니다. 즉, import와 export 문이 컴파일 시점에 명확히 결정되기 때문에, 번들러가 어떤 코드가 실제로 사용되는지 정확히 판단할 수 있습니다. 반면, require() 방식의 동적 모듈 로딩은 이러한 분석이 어렵습니다.
기존 번들링과 트리셰이킹의 차이
// math.js - 모든 함수가 포함됨
export function sum(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
export function subtract(a, b) {
return a - b;
}
// app.js - sum만 사용
import { sum } from './math.js';
console.log(sum(5, 3));
전통적인 번들링은 sum 외에도 multiply, subtract까지 포함하지만, 트리셰이킹이 활성화된 경우는 sum 하나만 포함됩니다.
트리셰이킹 적용 방법
1. ES6 모듈 사용
모듈 구문을 import/export로 작성해야 트리셰이킹이 가능합니다.
// ✅ 지원됨
import { calculate } from './utils';
export { validate } from './validators';
// ❌ 지원되지 않음
const utils = require('./utils');
module.exports = { validate };
2. 번들러 설정
Webpack 구성
웹팩 4 이상에서는 mode: 'production' 시 자동으로 트리셰이킹이 활성화되며, 수동 설정도 가능합니다.
// webpack.config.js
module.exports = {
mode: 'production',
optimization: {
usedExports: true,
},
};
Rollup 구성
Rollup은 트리셰이킹의 선구자이며 기본적으로 이를 지원합니다.
// rollup.config.js
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
},
treeshake: true,
};
3. 사이드이펙트 처리
특정 파일(예: 스타일시트, 전역 변수 변경 등)은 무조건 유지되어야 할 수 있습니다. 이를 package.json에서 지정해야 합니다.
{
"name": "my-package",
"sideEffects": false,
// 또는 특정 파일 확장자 지정
"sideEffects": [
"*.css",
"polyfills.js"
]
}
트리셰이킹의 한계
- 동적
import()또는 조건부 로딩은 정적 분석이 어려워 트리셰이킹이 제대로 작동하지 않을 수 있음 - CommonJS 기반 라이브러리는 트리셰이킹이 불가능
- 사이드이펙트 마크가 잘못되면 런타임 오류 발생 가능성
최적의 실천 가이드
1. 필요 시에만 라이브러리 요소 가져오기
// ❌ 전체 라이브러리 불러오기
import _ from 'lodash';
// ✅ 필요한 함수만 가져오기
import { debounce } from 'lodash-es';
2. 트리셰이킹 호환 라이브러리 선택
ES6 모듈 버전을 제공하는 라이브러리를 우선 고려하세요. 예: lodash-es, date-fns 등.
3. 번들 결과 분석 도구 활용
번들 크기를 시각적으로 확인하려면 webpack-bundle-analyzer를 사용하세요.
# 설치
npm install --save-dev webpack-bundle-analyzer
# 분석 실행
npx webpack-bundle-analyzer dist/main.js
실제 사례: 대규모 UI 라이브러리 최적화
최적화 전: 전체 컴포넌트를 일괄 불러옴 → 번들 크기 +200KB 이상
import { Button, Modal, Table, Form } from 'ui-library';
최적화 후: 필요 컴포넌트만 개별 가져옴 → 번들 크기 약 80% 감소
import Button from 'ui-library/Button';
import Modal from 'ui-library/Modal';
결론
트리셰이킹은 현대 웹 애플리케이션의 성능 향상 핵심 기술입니다. 효과적으로 활용하기 위해선 다음을 준수해야 합니다:
- ES6 모듈 문법 사용
- 번들러 옵션 정확하게 설정
- 사이드이펙트를 신중하게 관리
- 트리셰이킹을 지원하는 라이브러리 선택
- 주기적인 번들 분석 수행
이러한 접근을 통해 애플리케이션의 초기 로딩 속도와 메모리 사용량을 크게 개선할 수 있습니다.