Echarts 번들 사이즈 줄이기 (with bundle-analyzer)

번들 사이즈 확인하기

js 파일이 어떤 코드로 구성이 어떻게 되어 있는지 가시화하는 bundle-analyze를 통해 js 번들을 줄일 인사이트를 얻을 수 있습니다.

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

webpack-bundle-analyzer을 사용하기 위해서는 create-react-app 환경에서 eject을 해야합니다.
eject을 하게 되면 one build dependency를 잃게 되므로 Webpack, Babel, ESLint 등 간의 연결에 대해서 신경써야합니다.

npm install --save-dev cra-bundle-analyzer
yarn add -D cra-bundle-analyzer

eject 없이 webpack-bundle-analyzer를 사용하기 위해 cra-bundle-analyzer를 설치해줍니다.

npx cra-bundle-analyzer

해당 명령어를 실행해 webpack-bundle-analyzer의 결과를 static page인 build/report.html에서 확인할 수 있다. 해당 페이지에서 모듈의 용량과, 번들이 어떻게 구성되는 지 확인할 수 있습니다.

Echarts 라이브러리 트리쉐이킹하기

사내에서 진행하는 admin page에서 차트 라이브러리로 Echarts를 채택해 사용하고 있습니다.

bundle-analyzer를 통해서 번들 크기를 확인하였는데, Echarts의 번들 크기가 parsed된 size 기준으로 1005KB를 차지하고 있다는 점을 알 수 있었습니다.

import * as echarts from 'echarts';
<ECharts option={options} opts={{ renderer: 'canvas'}} />

echarts-for-react를 사용하기 위해 상기와 같은 코드로 import를 하게 됩니다. 내부적으로 트리쉐이킹을 하는 라이브러리도 있지만 echarts-for-react는 내부적으로 트리쉐이킹이 일어나지 않고 있기 때문에 이 때 1MB에 육박하는 모듈을 한번에 불러오게 됩니다.

해당 프로젝트에서는 BarChart와 LineChart만을 쓰고 있어, 트리쉐이킹을 통해서 번들 사이즈를 효과적으로 줄일 수 있을 것이라고 생각했습니다.

차트 컴포넌트에 필요한 인스턴스와 모듈만 선택해서 Import하는 방식으로 트리쉐이킹을 진행했습니다. 이후, import한 모듈을 실행하는 echart의 use 메소드를 실행합니다.

echarts-for-react 공식 문서

import * as echarts from 'echarts/core';
// 코어 라이브러리를 import 합니다.
import EChartsReactCore from 'echarts-for-react/lib/core';
// 사용할 Chart를 import 합니다.
import { BarChart } from 'echarts/charts';
// 차트에 쓰이는 component를 import 합니다.
import { TooltipComponent, GridComponent } from 'echarts/components';
// 차트를 렌더링 할 방식을 import 합니다.
import { SVGRenderer } from 'echarts/renderers';

...

// use 메소드를 통해 import한 component를 register 합니다.
echarts.use([BarChart, TooltipComponent, GridComponent, SVGRenderer])

<ReactEChartsCore
	echarts={echarts}
	option={option}
	lazyUpdate={true}
	style={{ height: "100%", width: "100%" }} />

Echarts 트리쉐이킹을 진행하여 1005KB에서 384KB로 약 62% 번들 사이즈가 줄어든 것을 확인할 수 있었습니다.

컴포넌트마다 일일이 import, echarts.use 호출을 하는 중복 코드를 개선하기 위해서 하나의 컴포넌트 안에서 사용할 모듈들을 한번에 등록해주는 Echarts Wrapper 컴포넌트를 제작했습니다. 해당 컴포넌트를 export 하여 props로 option을 전달해 사용하는 방식으로 리팩토링 했습니다.
이렇듯 Wrapper 컴포넌트를 제작해 사용하게 되면 라이브러리가 변경 되었을 때 빠르게 대응할 수 있다는 점에서 유지보수가 쉽다는 장점이 있었습니다.