트리 쉐이킹(Tree Shaking)

Title

Tags

Aliases

트리 쉐이킹(Tree Shaking)

Created

2 years ago

Updated

last year

디펜던시 트리 구조에서 ES6 모듈에서 실제로 가져오지 않은 export 를 떨어버려서(shake) 불필요한 코드를 제거하는 과정
모던 자바스크립트 애플리케이션 개발에서 webpack, Rollup 등의 모듈 번들러를 사용하는데, 이 도구들을 사용하여 번들링할 때 트리 쉐이킹이 발생한다.
궁극적으로 라이브러리의 코드를 트리 쉐이크하는 것은 앱의 번들러이다.
- 앱만이 라이브러리의 어떤 부분이 사용되는지 알고 있다.
라이브러리의 역할은 트리 쉐이크 가능하도록 보장해주는 것이다.
트리 쉐이킹의 요구사항
- ES6 모듈 문법의 정적 구조에 의존한다.
  - CJS와 ESM의 중요한 차이는 정적인지 동적인지이다.
  - CJS에서는 다음과 같이 동적으로 의존성을 가져올 수 있다.
    js
```
if (someCondition) {
	const {userAccount} = require('./userAccount');
}
```
```
if (someCondition) {
	const {userAccount} = require('./userAccount');
}
```
- 부수 효과(Side Effect)가 없어야 한다.
  - package.json의 sideEffect 속성을 사용하여 컴파일러에 힌트를 제공한다.

Webpack이 트리 쉐이킹을 수행하는 방법