Reducing the Bundle Size of plotly.js

TL;DR

Plotly is a highly versatile visualization library used not only in JavaScript but also in Python and R. However, its bundle size is too large for frontend use. This article summarizes how to reduce Plotly's bundle size and how to apply it with react-plotly.js.

About Plotly's Bundle Size

If you simply run something like npm install plotly, you'll get an 8MB bundle. Even minified and gzipped, it's still 1MB, which is huge.

Generally speaking, using this bundle size on the frontend makes things very slow. So Plotly provides pre-split bundles to some extent.

The following table summarizes the contents and sizes of the split bundles. They're still fairly large even when split.

Using distributed files

You can install them with something like npm install plotly.js-cartesian-dist. CDN links also have dedicated URLs for each bundle.

For drawing basic charts, I think cartesian is the best choice. Beyond that, pick the appropriate bundle for your use case to keep things lighter.

Using Split Bundles with react-plotly.js

Use createPlotlyComponent from react-plotly.js/factory.

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

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

This gives you a Plot component that uses the split bundle. Since you don't want the Plotly bundle to load on pages that don't use Plotly, you can use React.lazy:

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

This way, it only loads where the Plotly component is actually used, which is nice.