plotly.jsのbundle sizeを削減する

published: 2021/7/3 update: 2021/9/29

Table of Contents

TL;DR

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

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

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

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

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

NameContentsizeminifyminify+gzip
plotly.jsall8 MB3.4 MB1019.6 kB
plotly.js-basic-distbar, pie, scatter2.7 MB1007.3 kB327.3 kB
plotly.js-cartesian-distbar, box, contour, heatmap, histogram, histgram2d, histgram2dcountour, image, pie, scatter, scattertenary, violin3.3 MB1.2 MB398.7 kB
plotly.js-geo-distchoropleth, scatter, scattergeo2.9 MB1 MB337.3 kB
plotly.js-gl3d-distcone, isosurface, mesh3d, scatter, scatter3d, streamtube, surface, volume3.8 MB1.5 MB482.7 kB
plotly.js-gl2d-distheatmapgl, parcoords, pointcloud, scatter, scattergl, splom3.8 MB1.5 MB503.1 kB
plotly.js-mapbox-distchoroplethmapbox, densitymapbox, scatter, scattermapbox4.4 MB1.8 MB525 kB
plotly.js-finance-distbar, candlestick, funnel, funnelarea, histogram, indicator, ohlc, pie, scatter, waterfall3 MB1.1 MB353.5 kB
plotly.js-strict-distbar, barpolar, box, candlestick, carpet, choropleth, choroplethmapbox, contour, contourcarpet, densitymapbox, funnel, funnelarea, heatmap, histogram, histogram2d, histogram2dcontour, icicle, image, indicator, ohlc, parcats, parcoords, pie, sankey, scatter, scattercarpet, scattergeo, scattergl, scattermapbox, scatterpolar, scatterpolargl, scatterternary, splom, sunburst, table, treemap, violin, waterfall6.7 MB2.8 MB840.4 kB

Using distributed files

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

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

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

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

Plot.jsx
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を使っているコンポーネントがある場所でのみロードされるので嬉しいかもしれません。

記事に間違い等ありましたら、お気軽に以下までご連絡ください

E-mail: illumination.k.27|gmail.com ("|" replaced to "@")

Twitter: @illuminationK

当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse

Other Articles

Site Map

Table of Contents

    TL;DR

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

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


当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse
Privacy Policy

Copyright © illumination-k 2020-2021.