feat(hydration): defer loading of async components until actual hydrate

[edison1105]

close #12969

Changes of the PR

Ensures async components only load their code when they are actually needed according to the hydration strategy, saving bandwidth and improving initial page performance.

This PR includes an public API change:

export type HydrationStrategy = (
-  hydrate: () => void,
+  hydrate: (postHydrate?: () => any) => void,
  forEachElement: (cb: (el: Element) => any) => void,
) => (() => void) | void

We've added an optional callback parameter postHydrate to the hydrate function. This parameter will be executed after hydration is fully completed (including async component loading). This allows hydration strategies to more precisely control post-hydration behavior, especially in scenarios like event replaying.

Upgrade Guide

Old code:

const myStrategy = (hydrate, forEach) => {
  // Under certain conditions
  hydrate();
  // Execute subsequent operations...
}

New code:

const myStrategy = (hydrate, forEach) => {
  // Under certain conditions
  hydrate(() => {
    // Move code that needs to run after hydration completes here
  });
}

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB (+123 B)	38.2 kB (+53 B)	34.4 kB (+55 B)
vue.global.prod.js	159 kB (+123 B)	58.1 kB (+49 B)	51.7 kB (+88 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.5 kB	18.2 kB	16.7 kB
createApp	54.6 kB	21.3 kB	19.4 kB
createSSRApp	58.8 kB	23 kB	21 kB
defineCustomElement	59.4 kB	22.9 kB	20.8 kB
overall	68.6 kB	26.4 kB	24.1 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@12975

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@12975

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@12975

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@12975

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@12975

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@12975

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@12975

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@12975

@vue/shared

npm i https://pkg.pr.new/@vue/shared@12975

vue

npm i https://pkg.pr.new/vue@12975

@vue/compat

npm i https://pkg.pr.new/@vue/compat@12975

commit: 343247e

[edison1105]

It’s no longer needed because the loader will also execute in requestIdleCallback.

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	❌ failure	✅ success
pinia	✅ success	✅ success
primevue	❌ failure	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success