[Javascript] Tree Shaking

자바스크립트 개발에서 중요한 최적화 중 하나로 Tree-Shaking이란 것이 있다.

https://stackoverflow.com/questions/45884414/what-is-tree-shaking-and-why-would-i-need-it

나무를 턴다는 말 그대로, 실제로 사용되지 않는 소스코드들을 전부 제거하는 기본적인 최적화다.

C/C++, Go, Rust 등 정규 컴파일 과정을 거치는 정상적인 언어들은, 당연히 이걸 시키지 않아도 그냥 알아서 한다. 이 최적화를 보통 dead code elimination이라고 부르는데, Javascript만 이상한 자기들만의 용어를 만들어서 쓴다...

아무튼 저런 언어들은 아무리 무거운 라이브러리를 import하고 코드의 양이 많더라도, 컴파일타임이 길어질지언정 최종 결과물은 딱 사용하는 코드만 포함된 채로 만들어진다.

문제

하지만 문제는 Javascript가 정상적인 언어에 속하지 않는다는 것이다...
별도의 과정을 거치지 않는다면 그냥 소스코드가 뭉텅이로 올라가고, Javascript 로드 시간이 길어지고, 렌더링 시간도 길어지고, 사용자 응답 시간도 최악으로 치달을 수 있다.

그나마 Javascript를 서버로 사용할 경우에는 이런 문제가 두드러지지 않는데, 웹페이지를 제공할 경우에는 Tree-Shaking을 적용하고 말고로 꽤 극적인 성능 차이가 발생할 수 있다.

방법과 조건

Tree-Shaking은 webpack 같은 추가 번들링 도구를 통해서만 달성 가능하다.
사용할 수 있는 대표적인 도구는 webpack, rollup, esbuild, parcel 등이 있다.

그리고 모듈 시스템은 반드시 ESM을 사용해야 한다.
왜나면, import/export를 쓸 경우에는 컴파일타임에 종속관계를 파악하는 것이 보장되어서 컴파일타임 제거가 가능하기 때문이다.

하지만 CommonJS와 require를 쓸 경우에는 컴파일타임 분석이 어렵다.

const foo = require(filename + "foo" + something)

이딴식으로 코드를 짤 수 있기 때문이다. 저러면 무슨 수로 알겠는가?

참조
https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking
https://stackoverflow.com/questions/45884414/what-is-tree-shaking-and-why-would-i-need-it