Large Bundle Size for dash_mantine_components.js

[AnnMarieW]

The current dash_mantine_components.js file is quite large at 2.7MB, which can impact performance and load times.

Build Output:

> [email protected] build:js
> webpack

asset dash_mantine_components.js 2.6 MiB [compared for emit] [minimized] [big] (name: main) 1 related asset
orphan modules 1.59 MiB [orphan] 726 modules
runtime modules 1.29 KiB 7 modules
modules by path ./node_modules/ 5.18 MiB 1588 modules
modules by path ./src/ts/ 321 KiB
  modules by path ./src/ts/components/core/ 239 KiB 127 modules
  modules by path ./src/ts/components/charts/*.tsx 15.3 KiB 8 modules
  modules by path ./src/ts/components/extensions/ 14.1 KiB 8 modules
  modules by path ./src/ts/components/dates/*.tsx 24.9 KiB 7 modules
  modules by path ./src/ts/utils/*.ts 5.24 KiB
    ./src/ts/utils/charts.ts 655 bytes [built] [code generated]
    + 3 modules
  ./src/ts/index.ts 21.2 KiB [built] [code generated]
  ./src/ts/components/styles/MantineProvider.tsx 1.49 KiB [built] [code generated]
external {"commonjs":"react","commonjs2":"react","amd":"react","umd":"react","...(truncated) 42 bytes [built] [code generated]
external {"commonjs":"react-dom","commonjs2":"react-dom","amd":"react-dom","umd"...(truncated) 42 bytes [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  dash_mantine_components.js (2.6 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (2.6 MiB)
      dash_mantine_components.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Questions:

Orphan Modules:

• Are the orphan modules necessary for the current dependencies?
• If not, can they be removed?
• What is the best way to identify and eliminate unnecessary orphan modules?

Lazy Loading Components:

• What is the most efficient way to determine which components should be lazy-loaded?
• A good starting point may be components like charts, dates, and the carousel component. Would these be good candidates for lazy loading, or are there others to consider?

Additional Strategies to Reduce Bundle Size:

• Are there any other techniques or optimizations we could apply?

@alexcjohnson - I would love your input on this topic

[alexcjohnson]

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.

[emilhe]

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%)

[AnnMarieW]

Hi @emilhe
That chart is helpful - thanks!

I'm hoping that #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.