개념

Tree Shaking은 흔들리는 나무의 쓸모없는 잎사귀들이 떨어지는 모습을 따온 용어입니다. 이는 사용하지 않는 자바스크립트 파일을 제거하여 번들 크기를 최소화하는 프로세스를 의미합니다.

트리 쉐이킹으로 자바스크립트 페이로드 줄이기

적용 조건

1. ES 모듈 구문 사용: import 및 export 사용 필요. CJS도 가능하지만 트리 쉐이킹 작업이 더 까다로워 웹팩은 ES6 모듈만 지원합니다.
2. Named Export 사용: default export도 가능하지만 sideEffect 설정이 필요합니다.
3. Production 빌드: 개발 빌드에서는 설정과 상관없이 전체 모듈을 가져오므로 최적화를 위해 프로덕션 빌드 필요.
4. sideEffects 설정: package.json의 sideEffects에 설정값이 false이거나 추가되지 않은 파일이어야 함.

적용 방법

1. Babel 설정 유지: Babel이 ES6 모듈을 CommonJS 모듈로 트랜스파일하지 않도록 유지.

2. package.json의 sideEffects 설정값 추가:

   • 또는 Babel 설정에서 presets - "@babel/preset-env" - modules의 설정값을 false로 지정.
   • sideEffects 기본 설정값은 true이므로 false로 설정 필요.

   Webpack Optimization SideEffects

3. sideEffects 배열에 모듈 추가:

   • 함수가 렉시컬 스코프 외부의 값을 변경하여 예측 불가능한 결과를 일으키는 모듈을 추가.
   • sideEffects는 모듈이 다른 프로젝트에서 사용될 때 트리 쉐이킹을 지원.

   // package.json
   
   "sideEffects": ["./src/some-side-effectful-file.js", "*.css"]
   

   Webpack Tree Shaking

4. 외부 라이브러리 최적화:

   • UMD 모듈 패턴을 사용하는 라이브러리에서 필요한 항목만 가져오기.

   • 예: lodash 라이브러리

     // Before
     import { debounce } from 'lodash';
     
     // After
     import debounce from 'lodash/debounce';
     

5. TypeScript에서 Enum/Const Enum 대신 UnionType 사용:

   • Enum은 컴파일 시 IIFE로 변환되어 Tree Shaking이 되지 않음.
   • UnionType 사용하면 타입 정의의 이점을 유지하면서 Tree Shaking 가능.

   TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

추가 팁

• 일부 용량이 큰 라이브러리의 경우 공식 문서에 최적화 가이드가 있을 수 있습니다.