개요
Tree Shaking
출처 : https://en.wikipedia.org/wiki/Tree_shaking
코드를 최적화할 때 사용하는 [dead code elimination](https://en.wikipedia.org/wiki/Dead-code_elimination) 기술. 동적 언어에서 죽은 코드 제거는 정적 언어보다 훨씬 어렵다고 한다(런타임에 실행되기에 사용 여부를 알기가 어려워서 참조)
이 용어를 대중화한 Rollup.js는 CommonJS와 달리 ES6 모듈의 로딩이 정적이므로 분석 및 추론이 가능하다는 사실에 기반을 두고 있음.
이를 통해 import를 통해 가져오는 코드를 정적으로 분석하고, 사용되지 않는 모든 것을 제외함으로써 코드의 크기를 최적화함.
글을 쓴 이유
최근 RxJS에 대해 공부하고 있었는데 이런 내용을 발견했다.
… Rx의 초창기는 Event를 Array처럼 다루는 개념으로 시작한 것이기에 Array의 Method 문법과 많이 닮아 있었습니다. 그러나 이후 module과 번들 개념이 도입되고 RxJS의 기본 덩치가 커짐에 따라서 Method 방식은 Tree-Shaking에 불리하다는 문제가 있었습니다.
출처 : RxJS 한번 배워보실래요? | 테오의 프론트엔드 | 요즘IT
왜 메소드 방식은 Tree-Shaking에 불리할까!
바로 테스트해보기로 했다.
테스트
소스코드 : https://github.com/bluejoyq/vite-bundle-test
셋업
초기화
- vite
vanila-ts로 프로젝트 초기화
vite.config.ts
- 코드를 눈으로 볼 것이기에 minify는 끈다.
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
build: {
minify: false,
}
})코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>main.ts
- lib의 user를 import해서 메서드 하나를 수행한다.
import { User } from "./lib";
const user = new User();
user.getName();lib.ts
- main에게 import 당할 모듈이다.
export class User {
name : string;
constructor() {
this.name = 'bluejoy';
}
getName() {
return this.name;
}
setName(name : string) {
this.name = name;
}
}
export const setName = (name : string, user : User) => {
return user.name = name;
}빌드 및 분석
빌드
- 빌드 하자.
yarn build결과물
- 결과물
/dist/assets/*.js을 열어보자- 위의 polyfill이나 다른 부분을 넘어서 쭉 내려가보면 작성하고 번들링된 소스 코드가 보인다.
class User {
constructor() {
__publicField(this, "name");
this.name = "bluejoy";
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
}
const user = new User();
user.getName();분석
- User 클래스의
setName메서드는 호출되지 않았지만 포함됨. setName함수는 호출되지 않았으므로 포함되지 않음.- 만약
main.ts에setName('bluejoy', user);을 추가 시 번들에 포함됨.
- 만약
결론
class의method(정확하게는prototype을 통한 객체의method)는tree shaking을 현재로써는 하지 않는다.- 비용 혹은 개발 난이도가 높음.
- 그러므로 순수 함수와 연산자 메서드를 통해 최대한 class 메서드의 크기를 줄인다면 번들의 크기를 줄일 수 있다.
개발자 지망생입니다.