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.
Is there any reference documentation that I could consult on this matter? Any good advice, @alexcjohnson @chriddyp ?
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 - 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')
If there’s a PR open where you’re working on this, feel free to tag me (
@alexcjohnson) and I can take a look.
@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
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
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:
1 - False
2 - True
Choose from 1, 2 :
Thanks to @atharvakatre for pointing this out
I just noticed this in a new project I was starting - didn’t quite realise what it was doing, but this looks really great!
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!
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).