feat: prefetch in viewport inbound page chunks

src/client/app/components/Content.ts

@@ -1,9 +1,14 @@
 import { h } from 'vue'
 import { useRoute } from '../router'
+import { usePrefetch } from '../composables/preFetch'
 
 export const Content = {
   setup() {
     const route = useRoute()
+    if (!__DEV__) {
+      // in prod mode, enable intersectionObserver based pre-fetch.
+      usePrefetch()
+    }
     return () => (route.contentComponent ? h(route.contentComponent) : null)
   }
 }

src/client/app/composables/preFetch.ts

@@ -0,0 +1,89 @@
+// Customized pre-fetch for page chunks based on
+// https://github.com/GoogleChromeLabs/quicklink
+
+import { onMounted, onUnmounted, onUpdated } from 'vue'
+import { inBrowser, pathToFile } from '../utils'
+
+const hasFetched = new Set<string>()
+const createLink = () => document.createElement('link')
+
+const viaDOM = (url: string) => {
+  const link = createLink()
+  link.rel = `prefetch`
+  link.href = url
+  document.head.appendChild(link)
+}
+
+const viaXHR = (url: string) => {
+  const req = new XMLHttpRequest()
+  req.open('GET', url, (req.withCredentials = true))
+  req.send()
+}
+
+let link
+const doFetch: (url: string) => void =
+  inBrowser &&
+  (link = createLink()) &&
+  link.relList &&
+  link.relList.supports &&
+  link.relList.supports('prefetch')
+    ? viaDOM
+    : viaXHR
+
+export function usePrefetch() {
+  if (!inBrowser) {
+    return
+  }
+
+  if (!window.IntersectionObserver) {
+    return
+  }
+
+  let conn
+  if (
+    (conn = (navigator as any).connection) &&
+    (conn.saveData || /2g/.test(conn.effectiveType))
+  ) {
+    // Don't prefetch if using 2G or if Save-Data is enabled.
+    return
+  }
+
+  const rIC = (window as any).requestIdleCallback || setTimeout
+  let observer: IntersectionObserver | null = null
+
+  const observeLinks = () => {
+    if (observer) {
+      observer.disconnect()
+    }
+
+    observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const link = entry.target as HTMLAnchorElement
+          observer!.unobserve(link)
+          const { pathname } = link
+          if (!hasFetched.has(pathname)) {
+            hasFetched.add(pathname)
+            const pageChunkPath = pathToFile(pathname)
+            doFetch(pageChunkPath)
+          }
+        }
+      })
+    })
+
+    rIC(() => {
+      document.querySelectorAll('.vitepress-content a').forEach((link) => {
+        if ((link as HTMLAnchorElement).hostname === location.hostname) {
+          observer!.observe(link)
+        }
+      })
+    })
+  }
+
+  onMounted(observeLinks)
+  onUpdated(observeLinks)
+
+  onUnmounted(() => {
+    observer && observer.disconnect()
+  })
+}

src/client/app/index.ts

@@ -7,8 +7,7 @@ import { Content } from './components/Content'
 import Debug from './components/Debug.vue'
 import Theme from '/@theme/index'
 import { hot } from 'vite/hmr'
-
-const inBrowser = typeof window !== 'undefined'
+import { inBrowser, pathToFile } from './utils'
 
 const NotFound = Theme.NotFound || (() => '404 Not Found')
 
@@ -38,38 +37,17 @@ export function createApp() {
   let initialPath: string
 
   const router = createRouter((route) => {
-    let pagePath = route.path.replace(/\.html$/, '')
-    if (pagePath.endsWith('/')) {
-      pagePath += 'index'
-    }
+    let pagePath = pathToFile(route.path)
 
     if (isInitialPageLoad) {
       initialPath = pagePath
     }
 
-    if (__DEV__) {
-      // awlays force re-fetch content in dev
-      pagePath += `.md?t=${Date.now()}`
-    } else {
-      // in production, each .md file is built into a .md.js file following
-      // the path conversion scheme.
-      // /foo/bar.html -> ./foo_bar.md
-
-      if (inBrowser) {
-        pagePath = pagePath.slice(__BASE__.length).replace(/\//g, '_') + '.md'
-        // client production build needs to account for page hash, which is
-        // injected directly in the page's html
-        const pageHash = __VP_HASH_MAP__[pagePath]
-        // use lean build if this is the initial page load or navigating back
-        // to the initial loaded path (the static vnodes already adopted the
-        // static content on that load so no need to re-fetch the page)
-        const ext =
-          isInitialPageLoad || initialPath === pagePath ? 'lean.js' : 'js'
-        pagePath = `${__BASE__}_assets/${pagePath}.${pageHash}.${ext}`
-      } else {
-        // ssr build uses much simpler name mapping
-        pagePath = `./${pagePath.slice(1).replace(/\//g, '_')}.md.js`
-      }
+    // use lean build if this is the initial page load or navigating back
+    // to the initial loaded path (the static vnodes already adopted the
+    // static content on that load so no need to re-fetch the page)
+    if (isInitialPageLoad || initialPath === pagePath) {
+      pagePath = pagePath.replace(/\.js$/, '.lean.js')
     }
 
     if (inBrowser) {

src/client/app/router.ts

@@ -88,17 +88,17 @@ export function createRouter(
       (e) => {
         const link = (e.target as Element).closest('a')
         if (link) {
-          const { href, target } = link
-          const targetUrl = new URL(href)
+          const { href, protocol, hostname, pathname, hash, target } = link
           const currentUrl = window.location
+          // only intercept inbound links
           if (
             target !== `_blank` &&
-            targetUrl.protocol === currentUrl.protocol &&
-            targetUrl.hostname === currentUrl.hostname
+            protocol === currentUrl.protocol &&
+            hostname === currentUrl.hostname
           ) {
-            if (targetUrl.pathname === currentUrl.pathname) {
+            if (pathname === currentUrl.pathname) {
               // smooth scroll bewteen hash anchors in the same page
-              if (targetUrl.hash !== currentUrl.hash) {
+              if (hash !== currentUrl.hash) {
                 e.preventDefault()
                 window.scrollTo({
                   left: 0,

src/client/app/utils.ts

@@ -0,0 +1,32 @@
+export const inBrowser = typeof window !== 'undefined'
+
+/**
+ * Converts a url path to the corresponding js chunk filename.
+ */
+export function pathToFile(path: string): string {
+  let pagePath = path.replace(/\.html$/, '')
+  if (pagePath.endsWith('/')) {
+    pagePath += 'index'
+  }
+
+  if (__DEV__) {
+    // awlays force re-fetch content in dev
+    pagePath += `.md?t=${Date.now()}`
+  } else {
+    // in production, each .md file is built into a .md.js file following
+    // the path conversion scheme.
+    // /foo/bar.html -> ./foo_bar.md
+    if (inBrowser) {
+      pagePath = pagePath.slice(__BASE__.length).replace(/\//g, '_') + '.md'
+      // client production build needs to account for page hash, which is
+      // injected directly in the page's html
+      const pageHash = __VP_HASH_MAP__[pagePath]
+      pagePath = `${__BASE__}_assets/${pagePath}.${pageHash}.js`
+    } else {
+      // ssr build uses much simpler name mapping
+      pagePath = `./${pagePath.slice(1).replace(/\//g, '_')}.md.js`
+    }
+  }
+
+  return pagePath
+}