refactor: use prefetch at app root

Author: yyx990803

src/client/app/components/Content.ts

@@ -1,16 +1,10 @@
 import { h } from 'vue'
 import { useRoute } from '../router'
-import { usePrefetch } from '../composables/preFetch'
 
 export const Content = {
+  name: 'VitePressContent',
   setup() {
     const route = useRoute()
-
-    if (import.meta.env.PROD) {
-      // in prod mode, enable intersectionObserver based pre-fetch
-      usePrefetch()
-    }
-
     return () => (route.component ? h(route.component) : null)
   }
 }

src/client/app/composables/preFetch.ts

@@ -1,7 +1,8 @@
 // Customized pre-fetch for page chunks based on
 // https://github.com/GoogleChromeLabs/quicklink
 
-import { onMounted, onUnmounted, onUpdated } from 'vue'
+import { useRoute } from '../router'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { inBrowser, pathToFile } from '../utils'
 
 const hasFetched = new Set<string>()
@@ -97,7 +98,9 @@ export function usePrefetch() {
   }
 
   onMounted(observeLinks)
-  onUpdated(observeLinks)
+
+  const route = useRoute()
+  watch(() => route.path, observeLinks)
 
   onUnmounted(() => {
     observer && observer.disconnect()

src/client/app/index.ts

@@ -1,4 +1,4 @@
-import { App, createApp as createClientApp, createSSRApp } from 'vue'
+import { App, createApp as createClientApp, createSSRApp, h } from 'vue'
 import { inBrowser, pathToFile } from './utils'
 import { Router, RouterSymbol, createRouter } from './router'
 import { mixinGlobalComputed, mixinGlobalComponents } from './mixin'
@@ -7,9 +7,21 @@ import { useSiteDataByRoute } from './composables/siteDataByRoute'
 import { usePageData } from './composables/pageData'
 import { useUpdateHead } from './composables/head'
 import Theme from '/@theme/index'
+import { usePrefetch } from './composables/preFetch'
 
 const NotFound = Theme.NotFound || (() => '404 Not Found')
 
+const VitePressApp = {
+  name: 'VitePressApp',
+  setup() {
+    if (import.meta.env.PROD) {
+      // in prod mode, enable intersectionObserver based pre-fetch
+      usePrefetch()
+    }
+    return () => h(Theme.Layout)
+  }
+}
+
 export function createApp() {
   const router = newRouter()
 
@@ -43,8 +55,8 @@ export function createApp() {
 
 function newApp(): App {
   return process.env.NODE_ENV === 'production'
-    ? createSSRApp(Theme.Layout)
-    : createClientApp(Theme.Layout)
+    ? createSSRApp(VitePressApp)
+    : createClientApp(VitePressApp)
 }
 
 function newRouter(): Router {