From 8c54e215d603d09acd5766ef2924ca5b73d04be6 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Fri, 7 Nov 2025 14:10:06 +0800 Subject: [PATCH 1/3] docs(landing): optimize fonts loading (#21075) --- .vitepress/config.ts | 65 ++++++++++++++++++++------------------------ index.md | 16 +++++++++++ 2 files changed, 45 insertions(+), 36 deletions(-) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index f7ecb8e6..7726f093 100644 --- a/.vitepress/config.ts +++ b/.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: [ diff --git a/index.md b/index.md index 16c3a2e5..d84ac25a 100644 --- a/index.md +++ b/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 ---