트리쉐이킹

자바스크립트는 이미지와 다르게 네트워크 전송 이후에도 파싱, 컴파일, 실행 등의 추가적인 처리가 필요하기 때문에 더 많은 리소스를 소비한다. 170kb 크기의 자바스크립트를 파싱하고 컴파일하는데 드는 비용은 같은 크기의 jpeg 이미지를 디코딩하는 시간보다 훨씬 더 많다.

트리쉐이킹

트리쉐이킹은 사용하지 않는 코드를 제거하는 것이다.
트리 쉐이킹은 어플리케이션의 디펜던시 트리를 분석해서 사용하지 않는 모듈이나 함수를 제거함으로써, 최종 번들 파일 크기를 줄이는 방법이다.

트리 쉐이킹을 적용하기 위해서 다음단계를 따른다.

1. Babel 설정 변경
   Babel은 es6 모듈을 commonJS 모듈로 변환하는데, 트리쉐이킹을 위해서 es6 모듈을 유지해야 한다.

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}

2. 웹팩 설정
   웹팩 설정파일에서 트리쉐이킹을 활성화한다.

module.exports = {
  mode: 'production',
  // 기타 설정
};

3. Side Effects 설정
   package.json파일에 sideEffects 옵션을 추가하여 사이드 이펙트를 방지한다.

4. 모듈에서 필요한 것만 가져온다.

import {SimpleSort} from './././/```1';

5. 트리쉐이킹 결과를 확인한다.
   트리 쉐이킹 적용 전후의 번들파일 크기를 비교하여 최적화 효과를 확인한다.

// 트리 쉐이킹 적용 전
Asset      Size  Chunks             Chunk Names
js/main.js  20.8 KB       1  [emitted]  main

// 트리 쉐이킹 적용 후
Asset      Size  Chunks             Chunk Names
js/main.js  8.46 KB       1  [emitted]  main

트리 쉐이킹 시 주의 사항

• 동적 import : 동적 import는 트리쉐이킹이 제대로 적용되지 않을 수 있음
• 사이드 이펙트 : 모듈이 사이드 이펙트를 발생시키는 경우, 트리쉐이킹이 어려울 수 있다. 이를 방지하기 위해서 sideEffects옵션을 설정한다.
• commonJS 모듈 : CommonJS 모듈은 트리쉐이킹이 어렵기 때문에 ES6모듈을 사용하는 것이 좋다.