Core: Improve webpack chunk names

[yannbf]

Issue: N/A

UPDATE: Removed the prefetching and kept the nice chunk names. See rationale and planned followup below

What I did

With the new story store and stories being lazy loaded, the initial loading experience is great but the experience when switching stories is degraded. This PR adds two things:

1 - Webpack chunk names.
Important to identify what's actually being downloaded rather than random names like:

and have more meaningful names like:

2 - Prefetched chunks

Here's a video comparison of the user experience without and with prefetching enabled in a Slow 3G setting.

Before (without prefetching):

without-prefetch.mov

After (with prefetching):

with-prefetch.mov

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 9170830. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[yannbf]

Hey @tmeasday @shilman I opened this PR to generate a discussion. I don't know if the approach from this PR will prefetch every single story there is, but ideally the prefetch should be done only for the visible stories in the viewport, or when hovering the element in the sidebar.

[shilman]

This is awesome @yannbf

[MichaelArestad]

YES! Prefetch all the things! I plan to preload the font files as well. This is great!

[tmeasday]

Interesting @yannbf! I would prefer to be more intentional about which stories we prefetch, as you say, but perhaps prefetching everything is better than prefetching nothing (in the meantime)?

We could also put a feature flag on it, but that might be getting a bit fiddly. WDYT @shilman?

[shilman]

What does it do to startup time?

[tmeasday]

What does it do to startup time?

Ideally nothing right?, the aim of the prefetch annotation is to fetch the resources once the "site" is ready. Would be interesting to know if this is actually the case, for sure!

[yannbf]

What does it do to startup time?

Regarding prefetch it should not do anything. What it will do is append link prefetch tags at runtime like so:

And that should also not impact the initial user experience. The scripts will be fetched and cached for later use only at idle time and at low priority for the browser. The only downside of this approach is that the user will be prefetching all kinds of stories that they might never click, but the good thing is that those assets will be cached for later use if they do use. I think it's a good first iteration, then we might do some smart strategy for prefetching only a portion of stories based on some heuristics.

Now, for the chunk name part, I believe it does change things in build time, but from changing the execution of a dynamically generated hash to the chunk name based on the file name.. it might be negligible? I tested building with and without the flag and the times were pretty much the same (I didn't do a clinical check)

[tmeasday]

And that should also not impact the initial user experience. The scripts will be fetched and cached for later use only at idle time and at low priority for the browser.

@yannbf did you test it out?

I just tried it in Chromatic's Storybook and I am seeing a definitely slowdown in the time to render the first story (from around 1 -> 2.5s in my rough metrics) . I'm not sure why the browser isn't waiting to fetch the files but it seems to launch of a massive batch of requests straight away.

I would be leaning towards maybe not including it given that, unless we can find some way to make the browser deprioritize it.

[shilman]

we'll follow up in 6.5 with a custom approach that eagerly loads all links that are visible AFTER the entire storybook has loaded, to avoid the slowdown mentioned above.

thanks for the awesome POC @yannbf !!! 💯

[shilman]

Closing this with #16546 as a followup

[tmeasday]

@shilman I think we may as well keep the nicer bundle/chunk name part of this?

[shilman]

merging the modified PR without prefetching