ooh amazing! 🤩 That's a signifiant improvement, thank you for finding this!

Any chance I can be cheeky and ask for a version of this PR against the bootstrap-upgrade branch instead? ( see #3264). I've totally rewritten how the front-end works in that branch, complete with an npm build script for each template. It'd be great if we could codify this process in there instead of manually making the bundle - could then update more easily, and add additional plots etc.

Apologies, looks like I'm still including the plotly source in that branch - haven't yet gotten around to making it part of the build script. But it's the intention to do that with all / as many of the JS deps as possible.

Claude says that it might be possible to include plotly as an npm dependency in the new build system, then do something like the following as an alternative to npm run custom-bundle:

import Plotly from 'plotly.js/lib/core';
import Bar from 'plotly.js/lib/bar';
import Scatter from 'plotly.js/lib/scatter';
import Table from 'plotly.js/lib/table';
import Violin from 'plotly.js/lib/violin';
import Heatmap from 'plotly.js/lib/heatmap';
import Box from 'plotly.js/lib/box';

Plotly.register([Bar, Scatter, Table, Violin, Heatmap, Box]);

export default Plotly;

With Vite's tree-shaking, this will create a custom bundle containing only those traces, without needing any build scripts. This is the cleanest approach and most maintainable.

Not sure if this'd work or not, but if it does that feels nice and simple - no need to clone the Plotly repo as a dependency or anything, can just run npm run build in the template and it'd automagically do all the things.

From what i gathered, treeshaking is not working for plotly, that's why we need the bundling.