feat: dynamic modulepreload #7453

wmertens · 2025-03-24T23:18:48Z

This moves the service worker logic into the qrl handling, adding modulepreload link tags to request preloading chunks that will probably be needed soon.

This allows the browser to do its thing way better, and reduces complexity. (it would also allow some preloading in dev, but only for the SSR result, not implemented)

You can easily test the impact by going to the docs site and clicking the search button.

TODO:

test
replace qprefetch dispatches with some qwik API call
push qwik-city path preloads into bundlegraph
deprecate service workers, make them instead uninstall the current SW and use this
make this the default, we may not need any strategy any more
change jslink strategy to use this
fallback to prefetch when modulepreload not supported (iPhone 2017, iPad 2017, iPod Touch. All other browser support it for 1.5 years now. https://iosref.com/ios, https://caniuse.com/link-rel-modulepreload 93%)
qwik add service-worker now that the starter no longer includes it

changeset-bot · 2025-03-24T23:18:52Z

🦋 Changeset detected

Latest commit: 392921d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@builder.io/qwik	Minor
@builder.io/qwik-city	Minor
eslint-plugin-qwik	Minor
create-qwik	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

pkg-pr-new · 2025-03-25T08:54:44Z

Open in Stackblitz

npm i https://pkg.pr.new/@builder.io/qwik@7453

npm i https://pkg.pr.new/@builder.io/qwik-city@7453

npm i https://pkg.pr.new/eslint-plugin-qwik@7453

npm i https://pkg.pr.new/create-qwik@7453

commit: 392921d

github-actions · 2025-03-25T08:55:08Z

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
qwik-docs	✅ Ready (View Log)	Visit Preview	`392921d`

Varixo · 2025-03-25T09:06:30Z

Is it a good idea to move fetching bundle graph to the head element?
Currently everything is added at the bottom of page, but if we have some promise to await then interactivity will be broken? For qwikloader we have an option to append it at the top, maybe here also should be such as option?

wmertens · 2025-03-25T09:50:08Z

@Varixo

The bundlegraph is not that important for initial interactivity, it's better that the browser spends resources on showing the page first.
It is marked with normal priority before the modulepreloads, so depending on bandwidth the browser may or may not fetch it.

All the entry points get higher priority, so they will be available when you click.
The bundlegraph is not needed for QRLs to work, and priority goes to executing the app. Once the bundlegraph is loaded, it injects preloads for everything, but app functioning is not impacted.

maiieul · 2025-03-25T12:47:47Z

packages/qwik/src/optimizer/src/plugins/bundle-graph.ts

+    const internalDynamicImports = bundle.dynamicImports?.filter((d) => graph[d]) || [];
+    // If we have a lot of dynamic imports, we don't know which ones are needed, so we don't add any
+    // This can happen with registry bundles like for routing
+    if (internalDynamicImports.length > 0 && internalDynamicImports.length < 10) {


We need to keep the deps.hasSymbols logic as explained in #7417 (comment)

Ok, in #7453 I just removed all of it and only disallow more than 10 dynamic deps because we're probably not going to guess right. That works fine too it seems.

We need the hasSymbols guard, otherwise we will prefetch external dynamic deps again (e.g. shiki). 10 sounds like a reasonable safeguard, but I wonder if it's needed at all. The dynamic deps graph seems to stop on its own after a certain number of nodes. There is still a bit of over-prefetching on qwik-ui but I'm quite sure it's because some static deps that have dynamic deps aren't being tree-shaken somehow.

but then we won't preload dynamic imports for library components :-/

Hmmm are you sure? I will need to test this. Shouldn't be an issue if libraries use preserveModules, but better to support both ofc.

I have a better solution now! You can adjust the graph in your vite config now, and I already use it to clear the dynamic imports from qwik-city.
I think preloading shiki or threejs or whatever is good if it is actually needed, so in case it's problematic the dev can optimize manually. See the bundle-graph.unit tests.

I think preloading shiki or threejs or similarly "big" libs can be tricky. We can provide a way to preload those, but it should be optional imo. Otherwise that's also a breaking change.

So I think we need to exclude external deps by default.

How about a setting for maximum preload size?

Might not be needed at all?

packages/qwik-city/src/runtime/src/api.md

gioboa

👏👏👏@wmertens

preload doesn't preparse the JS but it is supported by very old iOS devices

this applies to `pnpm serve`, because normally dev mode doesn't generate preload urls

If the dev wants to include other dynamic imports, they can just make a qrl()

temporary until PR gets merged

wmertens added the COMP: performance This issue is related to a performance problem or bug label Mar 24, 2025

wmertens self-assigned this Mar 24, 2025

wmertens force-pushed the dynamic-modulepreload branch 2 times, most recently from b4e3856 to 5c623f5 Compare March 25, 2025 08:33

wmertens mentioned this pull request Mar 25, 2025

fix: under-prefetching — bundle graph missing dynamic dependencies #7417

Merged

5 tasks

wmertens force-pushed the dynamic-modulepreload branch from 5c623f5 to 361e497 Compare March 25, 2025 11:07

maiieul reviewed Mar 25, 2025

View reviewed changes

wmertens force-pushed the dynamic-modulepreload branch from bdea31c to 5d5c54a Compare March 25, 2025 16:57

wmertens marked this pull request as ready for review March 25, 2025 16:58

wmertens requested review from a team as code owners March 25, 2025 16:58

wmertens force-pushed the dynamic-modulepreload branch 4 times, most recently from ee1de36 to 23d530b Compare March 26, 2025 00:04

Varixo reviewed Mar 26, 2025

View reviewed changes

packages/qwik-city/src/runtime/src/api.md Outdated Show resolved Hide resolved

wmertens force-pushed the dynamic-modulepreload branch from 8df1c60 to 74b0661 Compare March 26, 2025 15:45

gioboa previously approved these changes Mar 26, 2025

View reviewed changes

wmertens dismissed gioboa’s stale review via d6e5953 March 27, 2025 08:11

wmertens force-pushed the dynamic-modulepreload branch 5 times, most recently from 05d51f1 to 115cee1 Compare March 27, 2025 13:31

wmertens added 2 commits March 30, 2025 11:12

feat(core): expose preload and remove qprefetch

e0bc6ce

chore: deprecate and unregister service workers

a9922b8

wmertens force-pushed the dynamic-modulepreload branch from f54c44d to a0906bf Compare March 30, 2025 09:42

wmertens and others added 22 commits March 30, 2025 12:16

chore: add preloader testing app

a9d9000

chore(preload): use preload if modulepreload not supported

a6da1ff

preload doesn't preparse the JS but it is supported by very old iOS devices

chore(preload): make js-append work & set default

04c1fcc

fix(docs): accessibility score

e75d04b

chore: clear preload links when completed

b3b4271

fix(core dev): generate correct preload urls in dev

dba4f22

this applies to `pnpm serve`, because normally dev mode doesn't generate preload urls

refactor(bundle-graph): plugin API, tests, optimization

10d9284

perf(qwikcity): remove qwikcity plan dyn imports from bundlegraph

ca631cf

feat(insights): add route hints to bundlegraph, refactor

5066aa5

perf(bundle-graph): only include segments for dynamic imports

659ed20

If the dev wants to include other dynamic imports, they can just make a qrl()

perf(preloader): manage a download queue

187f110

perf: patch rollup for correct bundle generation

a4ece62

temporary until PR gets merged

refactor: opts.entryStrategy.manual check in manualChunks

fc76eb1

wip speed test

bc65011

DELETEME disable ci e2e

11d90f1

wip requeue on fire

e886fd5

more logging

2447ea3

wip

558600d

wip preload better reprio

73e5666

wip more logging,

ee54ecf

wip tweaks

b9eb05c

fix underprefetching

bd69859

wmertens force-pushed the dynamic-modulepreload branch from a0906bf to bd69859 Compare March 30, 2025 10:16

wmertens mentioned this pull request Mar 30, 2025

RFC: Bundle preloading QwikDev/qwik-evolution#233

Open

wmertens added 3 commits March 30, 2025 19:48

hoist is needed for css

0ea5aff

maybe this fixes underprefetching?

c0cae06

fix(manifest): wrong ctxkind string

392921d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: dynamic modulepreload #7453

feat: dynamic modulepreload #7453

wmertens commented Mar 24, 2025 •

edited

Loading

changeset-bot bot commented Mar 24, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 25, 2025 •

edited

Loading

github-actions bot commented Mar 25, 2025 •

edited

Loading

Varixo commented Mar 25, 2025

wmertens commented Mar 25, 2025

maiieul Mar 25, 2025

wmertens Mar 25, 2025

maiieul Mar 26, 2025

wmertens Mar 26, 2025

maiieul Mar 26, 2025

maiieul Mar 26, 2025

wmertens Mar 26, 2025

maiieul Mar 28, 2025

gioboa left a comment

feat: dynamic modulepreload #7453

Are you sure you want to change the base?

feat: dynamic modulepreload #7453

Conversation

wmertens commented Mar 24, 2025 • edited Loading

changeset-bot bot commented Mar 24, 2025 • edited Loading

🦋 Changeset detected

pkg-pr-new bot commented Mar 25, 2025 • edited Loading

github-actions bot commented Mar 25, 2025 • edited Loading

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Varixo commented Mar 25, 2025

wmertens commented Mar 25, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gioboa left a comment

Choose a reason for hiding this comment

wmertens commented Mar 24, 2025 •

edited

Loading

changeset-bot bot commented Mar 24, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 25, 2025 •

edited

Loading

github-actions bot commented Mar 25, 2025 •

edited

Loading