perf(theme): preload font

Author: yyx990803

src/node/build/build.ts

@@ -10,6 +10,7 @@ import { createRequire } from 'module'
 import { pathToFileURL } from 'url'
 import { packageDirectorySync } from 'pkg-dir'
 import { serializeFunctions } from '../utils/fnSerialize'
+import type { HeadConfig } from '../shared'
 
 export async function build(
   root?: string,
@@ -65,6 +66,36 @@ export async function build(
         )
         .map((asset) => siteConfig.site.base + asset.fileName)
 
+      // default theme special handling: inject font preload
+      // custom themes will need to use `transformHead` to inject this
+      const additionalHeadTags: HeadConfig[] = []
+      const isDefaultTheme =
+        clientResult &&
+        clientResult.output.some(
+          (chunk) =>
+            chunk.type === 'chunk' &&
+            chunk.name === 'theme' &&
+            chunk.moduleIds.some((id) => id.includes('client/theme-default'))
+        )
+
+      if (isDefaultTheme) {
+        const fontURL = assets.find((file) =>
+          /inter-roman-latin\.\w+\.woff2/.test(file)
+        )
+        if (fontURL) {
+          additionalHeadTags.push([
+            'link',
+            {
+              rel: 'preload',
+              href: fontURL,
+              as: 'font',
+              type: 'font/woff2',
+              crossorigin: ''
+            }
+          ])
+        }
+      }
+
       // We embed the hash map and site config strings into each page directly
       // so that it doesn't alter the main chunk's hash on every build.
       // It's also embedded as a string and JSON.parsed from the client because
@@ -88,7 +119,8 @@ export async function build(
               assets,
               pageToHashMap,
               hashMapString,
-              siteDataString
+              siteDataString,
+              additionalHeadTags
             )
           )
       )

src/node/build/render.ts

@@ -29,7 +29,8 @@ export async function renderPage(
   assets: string[],
   pageToHashMap: Record<string, string>,
   hashMapString: string,
-  siteDataString: string
+  siteDataString: string,
+  additionalHeadTags: HeadConfig[]
 ) {
   const routePath = `/${page.replace(/\.md$/, '')}`
   const siteData = resolveSiteDataByRoute(config.site, routePath)
@@ -64,6 +65,12 @@ export async function renderPage(
     }
   }
 
+  const title: string = createTitle(siteData, pageData)
+  const description: string = pageData.description || siteData.description
+  const stylesheetLink = cssChunk
+    ? `<link rel="preload stylesheet" href="${siteData.base}${cssChunk.fileName}" as="style">`
+    : ''
+
   let preloadLinks =
     config.mpa || (!hasCustom404 && page === '404.md')
       ? []
@@ -100,14 +107,8 @@ export async function renderPage(
   const preloadHeadTags = toHeadTags(preloadLinks, 'modulepreload')
   const prefetchHeadTags = toHeadTags(prefetchLinks, 'prefetch')
 
-  const stylesheetLink = cssChunk
-    ? `<link rel="preload stylesheet" href="${siteData.base}${cssChunk.fileName}" as="style">`
-    : ''
-
-  const title: string = createTitle(siteData, pageData)
-  const description: string = pageData.description || siteData.description
-
   const headBeforeTransform = [
+    ...additionalHeadTags,
     ...preloadHeadTags,
     ...prefetchHeadTags,
     ...mergeHead(