【パフォーマンス改善】ngx-echarts でカスタムビルドを利用し、バンドルサイズを削減する方法

追記: 2022/04/21

echarts が v5.0.1 時点で TreeShaking に対応したので、カスタムビルド設定は不要化したようです。

参照: https://github.com/xieziyu/ngx-echarts#treeshaking-custom-build

概要

Angular 内で echarts を使うには ngx-echarts が利用できる。その設定は以下のようになる。

import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from './custom-echarts';

@NgModule({
  imports: [
    NgxEchartsModule.forRoot({
      echarts,
    }),
  ],
})
export class AppModule {}

しかし、この設定だと echarts のすべてのモジュールが含まれてしまい、不当にバンドルファイルが肥大する。これを解決する方法を書く。

echarts カスタムビルド

echarts は カスタムビルド という仕組みを用意している。必要なパーツだけを含める、というアプローチ。

含めることができるパーツは、以下に列挙されている。これ以外の要素は内部的に利用されているものなので、含めてはいけない。

echarts/lib/** と echarts/src/** が利用可能だが、自前でビルドするプロジェクトの場合、 src の方を利用する。ちなみに、src の方が若干ファイルサイズが小さい。

参考: Documentation - Apache ECharts(incubating)#Custom Build of Charts

ngx-echarts での設定方法

ngx-echarts でカスタムビルドを実現する方法について。

必要なモジュールを import する新規ファイルを作成。

// main module
export * from 'echarts/src/echarts';

// charts
import 'echarts/src/chart/line';
import 'echarts/src/chart/bar';
// 適宜、必要なチャートを import する

// components
import 'echarts/src/component/grid';
import 'echarts/src/component/tooltip';
import 'echarts/src/component/markPoint';
import 'echarts/src/component/markLine';
import 'echarts/src/component/markArea';
import 'echarts/src/component/legend';
import 'echarts/src/component/visualMap';
import 'echarts/src/component/legend';
// 適宜、必要なコンポーネントを import する

それを NgModule に登録する。

import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from './custom-echarts';

@NgModule({
  imports: [
    NgxEchartsModule.forRoot({
      echarts,
    }),
  ],
})
export class AppModule {}