트리 쉐이킹 (Tree Shaking) 이란 무엇인가

 

트리 쉐이킹 (Tree Shaking)

사용하지 않는 코드를 제거하는 방식을 말한다. (Rollup, Webpack에서도 찾아볼 수 있다)

나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking 이라고 명명하였다고 한다.

 

트리 쉐이킹을 적용할 지점을 찾아보자

사용하는 모듈로부터 전체를 Import 하지 않고 사용하는 기능만 {} 부분적으로 Import 한다.

import utils from 'utils-lib'

let count = 0;

const handlePlus = (a) => {
	count += a	
};

utils.parseResult(handlePlus(5)); // '현재까지 누적된 카운트는 : (a)'

 

누적값 앞뒤로 스트링 메시지가 감싸져 리턴값을 돌려주는 utils.parseResult() 메서드가 있다고 가정해보자

utils 라이브러리에는 위와 같이 표출을 도와주는 수많은 메서드들을 가지고 있는 모듈이다.

하지만 위에서 사용하는 메서드는 parseResult() 단 하나 뿐이다.

 

바로 이런 경우에 트리쉐이킹을 통해 사용하지 않는 모듈을 흔들어 떨어뜨릴 수 있는 것이다.

import { parseResult } from 'utils-lib'

let count = 0;

const handlePlus = (a) => {
	count += a
};

parseResult(handlePlus(5);

위 코드와 동일하지만 번들링된 js 크기는 분명 다를 것이다.

'utils-lib' 에서 사용하지 않는 모듈들은 함께 번들링 되지 않기 때문이다.

 

 

트리 쉐이킹 시 고려해야 할 점

프로젝트의 모듈들이 사이드 이펙트*를 발생시키는지 여부를 확인해야한다. 

안전한 트리쉐이킹이란, 예측 가능한 입력을 가지고 동일하게 함수의 스코프 밖에 어떤 것도 변경하지 않으면서 

예측 가능한 결과를 반환하는 모듈이 안전하게 트리쉐이킹 할 수 있는 디펜던시 이다.

 

웹팩 설정을 통한 사이드 이펙트 옵션체킹

{
    "name": "project",
    "version": "1.0.0",
    "sideEffects": false
}

특정 파일을 지정하여 사이드 이펙트의 영향을 받지 않도록 설정

{
    "name": "project",
    "version": "1.0.0",
    "sideEffects": [
        ".src/utils/utils.js"
    ]
}

 

---

 

참고한 문서

https://ui.toast.com/weekly-pick/ko_20180716

https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/