Tree shaking & Code Splitting
·
TIL
개인 프로젝트를 진행하며 빌드를 마친 후 파일이 대부분 고용량인 것을 확인할 수 있다. 큰 기능이 동작하는 모듈이라고 하더라도 번들에서 2mb가 넘게 나올 수는 없었다. 용량을 줄이기 위한 조치가 필요했고, 트리쉐이킹과 코드 스플리팅 개념에 대해 배우게 되었다. 적용 전: 적용 후: 트리쉐이킹(= Tree Shaking)이란? 코드를 빌드할 때도 실제로 쓰지 않는 코드들을 제외한다는 개념. 기본적으로 webpack이 수행하지만 commonjs으로된 코드나 development 단계에서는 적용되지 않는다. ES module로 의존성을 관리하는 모듈 및 production 모드로 실제 배포를 위해 번들링할 때만 적용된다. 트리쉐이킹은 왜 필요한 것인가? 번들 사이즈 축소에 따른 다운로드 속도와 컴파일 속도의..