plotly.jsのbundle sizeを削減する

TL;DR

plotlyはJavascriptだけでなくPythonやRでも使われている非常に利便性の高い可視化ライブラリです。しかし、フロントエンドで使うにはバンドルサイズが大きすぎるという問題があります。plotlyのバンドルサイズの削減方法と、react-plotly.jsでの適用方法をまとめておきます。

Plotlyのバンドルサイズについて

普通にnpm install plotlyみたいなことをするともれなく8MBのバンドルが生成されます。minify+gzipしても1MBという巨大さです。

一般的に言って、このバンドルサイズをフロントエンドで使うとすごく重くなります。なので、Plotly側である程度分割されたバンドルが用意されています。

分割されたバンドルの内容とサイズを以下の表にまとめました。分割されてもまあまあでかいですね。

Using distributed files

npm install plotly.js-cartesian-distというような形でインストールできます。CDNとかでも同様に専用のリンクがあります。

基本的な図を書く分にはcartesianあたりが一番いいんじゃないかと思っています。あとは用途に合わせて使い分ければ少しは軽くなるはずです。

react-plotly.jsで分割されたバンドルを使う

react-plotly.js/factoryにあるcreatePlotlyComponentを使います。

import Plotly from "plotly.js-cartesian-dist";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);
export default Plot;

のような形で分割されたバンドルを利用したPlotが使えるようになります。 あとはPlotlyが使われてないところでPlotlyのバンドルが読み込まれるのは嫌なので、

import React from "react";
const Plot = React.lazy(() => import("./Plot"));

のような形で、React.lazyを使えばPlotlyを使っているコンポーネントがある場所でのみロードされるので嬉しいかもしれません。