feat: shouldPreload hook

vuejs · Dec 15, 2021 · e721d60 · e721d60
1 parent f5308d7
commit e721d60
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 24 deletions.
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
@@ -39,29 +39,43 @@ export async function renderPage(
   ))
   const pageData = JSON.parse(__pageData)
 
-  const preloadLinks = (
-    config.mpa
-      ? appChunk
-        ? [appChunk.fileName]
-        : []
-      : result && appChunk
-      ? [
-          ...new Set([
-            // resolve imports for index.js + page.md.js and inject script tags for
-            // them as well so we fetch everything as early as possible without having
-            // to wait for entry chunks to parse
-            ...resolvePageImports(config, page, result, appChunk),
-            pageClientJsFileName,
-            appChunk.fileName
-          ])
-        ]
+  let preloadLinks = config.mpa
+    ? appChunk
+      ? [appChunk.fileName]
       : []
-  )
+    : result && appChunk
+    ? [
+        ...new Set([
+          // resolve imports for index.js + page.md.js and inject script tags for
+          // them as well so we fetch everything as early as possible without having
+          // to wait for entry chunks to parse
+          ...resolvePageImports(config, page, result, appChunk),
+          pageClientJsFileName,
+          appChunk.fileName
+        ])
+      ]
+    : []
+
+  let prefetchLinks: string[] = []
+
+  const { shouldPreload } = config
+  if (shouldPreload) {
+    prefetchLinks = preloadLinks.filter((link) => !shouldPreload(link, page))
+    preloadLinks = preloadLinks.filter((link) => shouldPreload(link, page))
+  }
+
+  const preloadLinksString = preloadLinks
     .map((file) => {
       return `<link rel="modulepreload" href="${siteData.base}${file}">`
     })
     .join('\n    ')
 
+  const prefetchLinkString = prefetchLinks
+    .map((file) => {
+      return `<link rel="prefetch" href="${siteData.base}${file}">`
+    })
+    .join('\n    ')
+
   const stylesheetLink = cssChunk
     ? `<link rel="stylesheet" href="${siteData.base}${cssChunk.fileName}">`
     : ''
@@ -105,7 +119,8 @@ export async function renderPage(
       pageData.description || siteData.description
     }">
     ${stylesheetLink}
-    ${preloadLinks}
+    ${preloadLinksString}
+    ${prefetchLinkString}
     ${renderHead(head)}
   </head>
   <body>
@@ -135,7 +150,7 @@ function resolvePageImports(
   appChunk: OutputChunk
 ) {
   // find the page's js chunk and inject script tags for its imports so that
-  // they are start fetching as early as possible
+  // they start fetching as early as possible
   const srcPath = normalizePath(
     fs.realpathSync(path.resolve(config.srcDir, page))
   )

diff --git a/src/node/config.ts b/src/node/config.ts
@@ -47,6 +47,7 @@ export interface UserConfig<ThemeConfig = any> {
 
   srcDir?: string
   srcExclude?: string[]
+  shouldPreload?: (link: string, page: string) => boolean
 
   /**
    * Enable MPA / zero-JS mode
@@ -60,7 +61,11 @@ export type RawConfigExports =
   | Promise<UserConfig>
   | (() => UserConfig | Promise<UserConfig>)
 
-export interface SiteConfig<ThemeConfig = any> {
+export interface SiteConfig<ThemeConfig = any>
+  extends Pick<
+    UserConfig,
+    'markdown' | 'vue' | 'vite' | 'shouldPreload' | 'mpa'
+  > {
   root: string
   srcDir: string
   site: SiteData<ThemeConfig>
@@ -70,10 +75,6 @@ export interface SiteConfig<ThemeConfig = any> {
   tempDir: string
   alias: AliasOptions
   pages: string[]
-  markdown: MarkdownOptions | undefined
-  vue: VuePluginOptions | undefined
-  vite: ViteConfig | undefined
-  mpa: boolean
 }
 
 const resolve = (root: string, file: string) =>
@@ -127,6 +128,7 @@ export async function resolveConfig(
     alias: resolveAliases(themeDir),
     vue: userConfig.vue,
     vite: userConfig.vite,
+    shouldPreload: userConfig.shouldPreload,
     mpa: !!userConfig.mpa
   }