Open AnnMarieW opened 6 days ago
Chunking out things like charts is probably the best solution. If you tell webpack to make a source map (in a separate .map
file that you don't include in the package, for example devtool: 'source-map'
like dash-ag-grid does) then you can use source-map-explorer
to figure out which parts are most important to break out.
It looks as though orphan modules are not included in the bundle anyway, so we should be able to ignore those.
I have put all the (heavy) dash-leaflet plugins as separate chunks. I guess you could adopt a similar strategy, e.g.
https://github.com/emilhe/dash-leaflet/blob/master/src/ts/components/EditControl.tsx
EDIT: I used WEBPACK VISUALIZER to figure out where to start. Here is the chart for dmc. The obvious element to chunk are recharts (25.7%), and highlight.js (22.2%)
Hi @emilhe That chart is helpful - thanks!
I'm hoping that https://github.com/snehilvj/dash-mantine-components/pull/366 will fix highlights because it reduces the file size of Highlight.py from 442.9kB to 10.8kB.
So looks like recharts is the place to start.
The current
dash_mantine_components.js
file is quite large at 2.7MB, which can impact performance and load times.Build Output:
Questions:
Orphan Modules:
Lazy Loading Components:
Additional Strategies to Reduce Bundle Size:
@alexcjohnson - I would love your input on this topic