프로젝트를 빌드하면서 번들링 파일을 분석하는데 echarts-for-react 번들링 사이즈가 생각보다 매우 컸다. 막상 사용한 차트는 몇 종류 안되는데 echarts-for-react 번들링 사이즈는 거의 1MB에 육박했다. (echarts-for-react에 대해 *Tree Shaking이 제대로 일어나지 않고 있는 것 같았다.)
그래서 공식 문서를 찾아보니, Tree Shaking에 대한 내용이 나와있었고, 이를 적용시켜 보았다.
단순히 echarts-for-react를 import 해오면 7.5k 밖에 되지 않는데, 최종 번들링 사이즈가 왜이렇게 큰 지 확인해보자. (참고로 vscode에서 저렇게 모듈 사이즈가 나오는 것은 ‘Import Cost’ 라는 Extension을 설치하면 된다.)
위는 echarts-for-react의 index.ts 파일인데, import * as echarts from ‘echarts’; 로 echarts를 import 해오는 것을 볼 수 있다.
그래서 Import Cost로 확인해보니 저 import 구문이 약 1MB 정도 되는 모듈을 불러오는 코드임을 확인할 수 있었고, 이 부분에서 Tree Shaking이 제대로 일어나지 않아 번들링 사이즈가 커진 것이다.
echarts의 공식 문서를 확인해보면, packaging tool(webpack)이 Tree shaking을 할 수 있도록 Tree Shaking Interface를 사용하는 것이 좋다고 나와있다.
이제, 공식 문서를 참고하여 Tree Shaking 할 수 있도록 코드를 작성해보자.