docs(landing): optimize fonts loading (#21075)

Author: bluwy

.gitignore

@@ -7,6 +7,7 @@
 *.log
 /.vscode/
 /docs/.vitepress/cache
+/docs/.vitepress/.temp
 /packages/vite/LICENSE
 dist
 dist-ssr

docs/.vitepress/config.ts

@@ -8,7 +8,6 @@ import {
   groupIconVitePlugin,
 } from 'vitepress-plugin-group-icons'
 import llmstxt from 'vitepress-plugin-llms'
-import type { PluginOption } from 'vite'
 import { markdownItImageSize } from 'markdown-it-image-size'
 import packageJson from '../../packages/vite/package.json' with { type: 'json' }
 import { buildEnd } from './buildEnd.config'
@@ -95,30 +94,6 @@ export default defineConfig({
       'link',
       { rel: 'alternate', type: 'application/rss+xml', href: '/blog.rss' },
     ],
-    ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
-    [
-      'link',
-      {
-        rel: 'preconnect',
-        href: 'https://fonts.gstatic.com',
-        crossorigin: 'true',
-      },
-    ],
-    [
-      'link',
-      {
-        rel: 'preload',
-        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600&family=IBM+Plex+Mono:wght@400&display=swap',
-        as: 'style',
-      },
-    ],
-    [
-      'link',
-      {
-        rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600&family=IBM+Plex+Mono:wght@400&display=swap',
-      },
-    ],
     inlineScript('banner.js'),
     ['link', { rel: 'me', href: 'https://m.webtoo.ls/@vite' }],
     ['meta', { property: 'og:type', content: 'website' }],
@@ -468,16 +443,34 @@ export default defineConfig({
       level: [2, 3],
     },
   },
-  transformPageData(pageData) {
-    const canonicalUrl = `${ogUrl}/${pageData.relativePath}`
-      .replace(/\/index\.md$/, '/')
-      .replace(/\.md$/, '')
-    pageData.frontmatter.head ??= []
-    pageData.frontmatter.head.unshift(
-      ['link', { rel: 'canonical', href: canonicalUrl }],
-      ['meta', { property: 'og:title', content: pageData.title }],
-    )
-    return pageData
+  transformHead(ctx) {
+    const path = ctx.page.replace(/(^|\/)index\.md$/, '$1').replace(/\.md$/, '')
+
+    if (path !== '404') {
+      const canonicalUrl = path ? `${ogUrl}/${path}` : ogUrl
+      ctx.head.push(
+        ['link', { rel: 'canonical', href: canonicalUrl }],
+        ['meta', { property: 'og:title', content: ctx.pageData.title }],
+      )
+    }
+
+    // For the landing page, move the google font links to the top for better performance
+    if (path === '') {
+      const googleFontLinks: HeadConfig[] = []
+      for (let i = 0; i < ctx.head.length; i++) {
+        const tag = ctx.head[i]
+        if (
+          tag[0] === 'link' &&
+          (tag[1]?.href?.includes('fonts.googleapis.com') ||
+            tag[1]?.href?.includes('fonts.gstatic.com'))
+        ) {
+          ctx.head.splice(i, 1)
+          googleFontLinks.push(tag)
+          i--
+        }
+      }
+      ctx.head.unshift(...googleFontLinks)
+    }
   },
   markdown: {
     // languages used for twoslash and jsdocs in twoslash
@@ -520,7 +513,7 @@ Vite is a new breed of frontend build tooling that significantly improves the fr
 - A [build command](https://vite.dev/guide/build.md) that bundles your code with [Rollup](https://rollupjs.org), pre-configured to output highly optimized static assets for production.
 
 In addition, Vite is highly extensible via its [Plugin API](https://vite.dev/guide/api-plugin.md) and [JavaScript API](https://vite.dev/guide/api-javascript.md) with full typing support.`,
-      }) as PluginOption,
+      }),
     ],
     optimizeDeps: {
       include: [

docs/index.md

@@ -9,6 +9,22 @@ layout: home
 aside: false
 editLink: false
 markdownStyles: false
+
+head:
+  - - link
+    - rel: preconnect
+      href: https://fonts.googleapis.com
+  - - link
+    - rel: preconnect
+      href: https://fonts.gstatic.com
+      crossorigin: ''
+  - - link
+    - rel: preload
+      href: https://fonts.googleapis.com/css2?family=Manrope:wght@600&family=IBM+Plex+Mono:wght@400&display=swap
+      as: style
+  - - link
+    - rel: stylesheet
+      href: https://fonts.googleapis.com/css2?family=Manrope:wght@600&family=IBM+Plex+Mono:wght@400&display=swap
 ---
 
 <script setup>