프로젝트를 하다가 react-icons 에 대한 리뷰를 받았는데 , 관련해서 성능향상 방법에 대해 찾아보다가 트리쉐이킹이란 방법을 알게되었다.

🙅‍♂️문제점

개발할 때 여러 모듈을 import 하고 export 해서 사용한다.

import * as util from "../utilFile";

위 코드를 보면 utilFile이란 파일에 있는 모듈들을 가져온다. 여기서 궁금한건 저 파일 안에 얼마나 많은 모듈이 있는 건지, 그 모듈을 다 쓰는지 이다. 이 상태에서 빌드를 하면 저 utilFile에 있는 모듈들이 번들에 포함되겠지만 utilFile의 모듈을 다 쓰지 않는다면 쓸데 없이 번들의 사이즈를 키운 것이 된다,

🌳트리쉐이킹

여기서 사용하는 모듈만 번들에 포함시키고 나머지를 제거하는 방법을 트리쉐이킹 이라고 한다.

🙋‍♂️방법

트리 쉐이킹은 어떻게 적용시킬까? 트리쉐이킹을 하기 위해선 몇가지 조건이 있다.

1. 바벨 설정

ES6문법을 CommonJS 로 변환 시키지 않는 방법이다. 바벨은 es6 이상의 문법을 웹 브라우저가 이해 할 수 있도록 es5 문법으로 변환 시켜준다. 여기서 import 문을 require 문으로 변환 시키는데 require은 export 하는 모든 모듈을 가져오게 된다. 그래서 이를 아래와 같은 babelrc 설정으로 막아줄 수 있다

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

1. 모듈 내 사이드 이펙트 발생 여부 확인

let count = 1;

const increaseCount = (addCount) => {
	count+=addCount;
}

위 코드가 사이드 이펙트가 발생하고 있는 예시이다. increaseCount 함수는 쓰이지 않아 다른 코드에 영향을 주지 않지만, increaseCount 함수 바깥의 변수를 변경하는 작업으로 인해 사이드 이펙트를 일으킨다고 판단해서 트리 쉐이킹이 이뤄지지 못한다.

사이드 이펙트가 없는 모듈이란 바깥의 변수를 변경하지 않고, 모듈 내 코드로만 봤을 때 인풋 파라미터 값에 의해 아웃풋 결과를 예측할 수 있도록 되어 있어야 트리쉐이킹 하기에 안전한 모듈이다. 이 조건을 충족하면 그 모듈에 사이드 이펙트가 일어나지 않는 모듈이라고 package.json에 정해줄 수 있는데,

{
  "name": "webpack-tree-shaking-example",
  "version": "1.0.0",
  "sideEffects": false
}

다음과 같이 설정 해줄 수 있다.

1. 필요한 모듈만 import 해오기