[Webpack] tree shaking이란 무엇인가요?

tree shaking 나무흔들기란 무엇일까.

잠깐만 찾아도 나오는 내용이긴 하지만, 모듈을 번들링할 때 사용하지 않는 코드를 제거하는 최적화 과정을 말한다.

 

webpack이 해주는데, 항상 해주는 것은 아니고, commonjs으로된 코드나 development 단계에서는 적용되지않고,

ES module로 의존성을 관리하는 모듈 및 production 모드로 실제 배포를 위해 번들링할 때만 적용된다.

 

예를 들어서 아래와 같은 코드가 있다고 했을때,

 

// 모듈 1,2,3에서 모든 것을 import 받아오고 있음.
import * from "module1";
import * from "module2";
import * from "module3";

 

근데 실제로 코드에서는 module1의 function1과 module3의 function6를 사용한다고 했을때,

아래와 같이 최적화된다.

 

import {function1} from "module1";
import {function6} from "module3";

이렇게 webpack에서 쓰지 않는 함수들을 번들링 과정에서 제거하고, 최적화된 파일을 사용할 수 있다. (번들 파일 크기도 줄어든다.)