Optimize first bundle time and size

[tmeasday]

When code splitting + lazy compiling, the biggest cost is the initial bundle of the first CSF file.

For instance, with PROJECT=design-system COMPILE_LAZILY=1 BUILDER=esbuild IMPORT=static I see the following timings:

• main.js bundle (with the SB runtime + entry point, 400kb): ~800-100ms
• CSF bundle (small, typically ~10-20kb) + vendors bundle (~1.4MB) : 1300ms,

After that each CSF bundle is quite fast. I assume the difference in the first bundle is the generation of the vendors bundle.

The large vendors bundle has an additional issue for load time -- when you load the first story in a SB you need to download+parse the majority of the node_modules code, which isn't ideal if you only ever want to view that one story ("single story mode" is a use case we want to support).

Some investigations here that would be interesting:

1. Are there general optimizations that can make this smaller/faster we should be using?
2. Specifically can we use tree shaking? I experimented with turning it on but it didn't make a big difference. Why not?
3. Is it possible to avoid webpack making a single vendors asset and instead to split it a bit? What are the downsides?

[tmeasday]

Looking at the production bundle and the sizes are perhaps more reasonable. I suspect the default optimization tradeoffs made the are a little different?

[bebraw]

I can see the vendor bundle contains popular dependencies like React and Lodash. One technique to avoid compilation for those would be to use externals and rely on globals while loading these specific dependencies through a CDN link for example.

[tmeasday]

Let's try it out?

[bebraw]

Ok, I will add that behind a flag to test.

On 8. Jun 2021, at 15.03, Tom Coleman @.***> wrote:

 Let's try it out?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub, or unsubscribe.