[WEBPACK] 트리쉐이킹

트리쉐이킹
트리쉐이킹이란 말을 처음 들어보는 사람도 있을 것이다.
말 뜻 그대로 풀이하면 나무 흔들기.. 나무를 흔들어 죽은 나뭇잎을 떨어뜨리는 것처럼 필요없는 코드들을 제거해주어 번들파일의 크기나 번들링의 시간을 줄여주는 작업을 트리쉐이킹이라고 한다.

대체적으로 어떠한 작업들이 이루어질까?
ES6 이상의 모듈 구문은 정적 구조에 의존한다. import, export... 이를 가지고 의존성을 보고 해당 소스들을 번들링 하는데 webpack4에서 sideEffects가 추가 되었고, 설정을 false로 프로퍼티를 표시하여 사용하지 않는 export는 제거해도 괜찮다는 것을 webpack에 알려줄 수 있게 되었다.
또는 아래와 같은 형식으로 제거되는 것을 방지할 수 있다.

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

이제 트리쉐이킹이 필요한 부분에 대한 처리가 필요하다. sideEffects 의 경우 구문레벨이 아닌 모듈 레벨에서 사용되기 때문에 구문레벨에서 사이드이펙드가 없다는 것을 표기해 줄 필요가 있다.

var Button$1 = /*#__PURE__*/ withAppProvider()(Button);

사용하지 않는 변수의 초기값이 사이드 이펙트가 없다(순수하다)면, 사용하지 않는 코드로 표시되고 실행되지 않으며 최소화할 때 삭제되게 된다.
사실 이경우를 제외하고도 사용하지 않는 패키지들을 없애주고 또는 사용하지 않는 코드들을 애초에 제거해 놓으면 그것도 영향을 받는것 같다.

주의사항
webpack4에서는 ES6 모듈(import, export)을 대상으로 tree-shaking이 기본으로 동작합니다. 하지만, CommonJS 방식의 모듈(require)을 사용하는 경우에는 동작하지 않는다.
lodash를 예로 들면, lodash는 CommonJS 형태로 번들링되어 배포되기 때문에 webpack의 기본설정으로는 lodash를 트리쉐이킹 할 수 없다.
트리쉐이킹을 위해서는 babel-plugin-lodash을 사용하거나 lodash-es를 사용하는 것을 추천한다.