Skip to content

Commit

Permalink
perf(theme): preload font
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Mar 14, 2023
1 parent 5dd2a23 commit 24735db
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 9 deletions.
34 changes: 33 additions & 1 deletion src/node/build/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -88,7 +119,8 @@ export async function build(
assets,
pageToHashMap,
hashMapString,
siteDataString
siteDataString,
additionalHeadTags
)
)
)
Expand Down
17 changes: 9 additions & 8 deletions src/node/build/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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')
? []
Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit 24735db

Please sign in to comment.