コンパイラかく語りき

import { Fun } from 'programming'

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

概要

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 {}

というやり方。

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

実施結果

自分が開発に携わっているアプリケーションの実例。 以下、webpack-bundle-analyzer を利用したバンドルサイズの比較。

バンドルファイルに含まれる echarts 全体のサイズは、2.52MB から 1.62MB に減少(圧縮前)。

before after
スクリーンショット 2020-08-17 15.42.46.png (169.5 kB) スクリーンショット 2020-08-17 15.49.12.png (169.7 kB)

バンドルファイル全体としては、693.02KB から 528.97KB 減少(gzipped)。24%の削減。

before after
スクリーンショット 2020-08-17 15.49.31.png (14.8 kB) スクリーンショット 2020-08-17 15.49.40.png (16.6 kB)

ちなみに、ユーザがアプリケーションを利用可能になるまでの時間である TTI は0.5秒ほど短縮された。