Custom Partial Plotly Bundle to Reduce Bundle Size Further

[mithi]

Full discussion in: https://github.com/plotly/plotly.js/issues/5031

[mithi]

[mithi]

Attempting to reduce bundle size further https://github.com/mithi/hexapod/issues/55

[mithi]

Base

After using custom bundle

import Plotly from "plotly.js/lib/core";
import Scatter3d from "plotly.js/lib/scatter3d"
import Mesh3d from "plotly.js/lib/mesh3d"

import createPlotlyComponent from "react-plotly.js/factory";
Plotly.register([Scatter3d, Mesh3d]);

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

After splitting custom bundle

When you split the core plotly module from others

        import("plotly.js/lib/core").then(Plotly => {
            Plotly.register([Scatter3d, Mesh3d])
            this.Plot = createPlotlyComponent(Plotly)
        })

[mithi]

Base

Custom Bundle

Custom Bundle Split

[mithi]

This is the result of splitting to two bundles 312.71 KB and 115.61 KB

.	.

[mithi]

With a 414kb bundle this is the performance

.	.

With 450kb bundle this is the performance

.	.

[mithi]

Netlify Performance (450kb)

.	.	.

Netlify Custom Split Bundle Performance (300kb + 115kb)

.	.	.

[mithi]

The best way to reduce bundle size is to use a smaller library such as https://github.com/mithi/bare-minimum-3d