feat: shouldPreload hook

3 years ago · e721d60585
parent f5308d746f
commit e721d60585
2 changed files with 41 additions and 24 deletions
--- 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))
  )
--- 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
  }