Dash - How to implement chunked loading of custom components

Dash Python
1

I am looking into splitting dash_extensions into chunks as the bundle size has grown too large. I tried to follow the approach of dash-core-components, but i keep getting chunk load errors,

Loading chunk 141 failed.
(error: http://127.0.0.1:7879/_dash-component-suites/dash_extensions/async-null.js)

Is there any reference documentation that I could consult on this matter? Any good advice, @alexcjohnson @chriddyp ? :slight_smile:

2

Not that I’m aware of. Would be fantastic to create one though, so any notes you could provide from your experience - once it’s working :wink: - would be very helpful!

Another good reference PR may be the one that added this to dash-bio, since we did that a little later so may have worked out some of the kinks in the process Async dash bio by Marc-Andre-Rivet · Pull Request #430 · plotly/dash-bio · GitHub

Based on the null in the url there, I’m wondering if the webpackChunkName comment is missing? These comments are used by webpack to name the chunk files, like:

alignmentChart: () =>
    import(/* webpackChunkName: "alignment" */ './fragments/AlignmentChart.react')

creates async-alignment.js

1 Like
3

If there’s a PR open where you’re working on this, feel free to tag me (@alexcjohnson) and I can take a look.

4

Maybe this pull request will help too since it’s recent – for dash-vtk Add async loading to reduce package size by xhlulu · Pull Request #29 · plotly/dash-vtk · GitHub

5

@alexcjohnson yes, I was indeed missing the “webpackChunkName”. I wasn’t aware that it was used for naming. Reading through your link @AnnMarieW I realised that I also needed to manually add entries to the _js_dist list in “init.py”. Implementing these changes and updating a few libraries, the async loading is now working. Thank you so much for your help :smiley:

1 Like
6

Moving the Lottie, Burger and Mermaid components to separate chunks, the main bundle size has decrease from 1.3 MB to about 40 kB (!). And after getting a hold what is going on, it’s actually not that complicated. It is in fact quite elegant :slight_smile:

1 Like
7

Good news :confetti_ball:

Based on this recently merged pull request from @xhlu, you will now have the option to create a new custom component with the dash-component-boilerplate that uses async loading. All the hard work will already be done!

Now, when you create a new project with the cookiecutter one of the questions is:

Select use_async:
1 - False
2 - True
Choose from 1, 2 [1]:

Thanks to @atharvakatre for pointing this out :+1:

2 Likes
8

I just noticed this in a new project I was starting - didn’t quite realise what it was doing, but this looks really great!

1 Like
9

Not to pre-jump the docs - but should I use-async for everything? I’m writing a wrapper for a rich text editor, (so low-code, but larger dependancy packages) and was wondering if this would be something worth doing for that?

It’s just a single component file - so perhaps it makes no difference to me?

Thanks a bunch and apologies if its a basic question!
Amien

10

Chunking requires knowledge of Promises and/or JS async, as well as understand the differences in webpack configuration between chunking and non-chunking. Once you successfully built your first async components, the subsequent ones should be easier.

That said, I recommend it for multi-page apps, where a component is only used in a single app. Also recommend if your component bundle is large (if it’s written in pure React and the bundle size is very small, you could choose to skip async).