Skip to content

Commit

Permalink
perf: only update necessary head tags in prod
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Jun 22, 2021
1 parent c046905 commit e6bb5a4
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 23 deletions.
44 changes: 21 additions & 23 deletions src/client/app/composables/head.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { HeadConfig, SiteData } from '../../shared'
import { Route } from '../router'

export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
let metaTagEls: HTMLElement[] = Array.from(document.querySelectorAll('meta'))
let managedHeadTags: HTMLElement[] = []
let isFirstUpdate = true

const updateHeadTags = (newTags: HeadConfig[]) => {
Expand All @@ -14,11 +14,14 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
return
}

console.log(managedHeadTags)
console.log(newTags)

const newEls: HTMLElement[] = []
const commonLength = Math.min(metaTagEls.length, newTags.length)
const commonLength = Math.min(managedHeadTags.length, newTags.length)
for (let i = 0; i < commonLength; i++) {
let el = metaTagEls[i]
const [tag, attrs] = newTags[i]
let el = managedHeadTags[i]
const [tag, attrs, innerHTML = ''] = newTags[i]
if (el.tagName.toLocaleLowerCase() === tag) {
for (const key in attrs) {
if (el.getAttribute(key) !== attrs[key]) {
Expand All @@ -31,6 +34,9 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
el.removeAttribute(name)
}
}
if (el.innerHTML !== innerHTML) {
el.innerHTML = innerHTML
}
} else {
document.head.removeChild(el)
el = createHeadElement(newTags[i])
Expand All @@ -39,15 +45,15 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
newEls.push(el)
}

metaTagEls
managedHeadTags
.slice(commonLength)
.forEach((el) => document.head.removeChild(el))
newTags.slice(commonLength).forEach((headConfig) => {
const el = createHeadElement(headConfig)
document.head.appendChild(el)
newEls.push(el)
})
metaTagEls = newEls
managedHeadTags = newEls
}

watchEffect(() => {
Expand All @@ -56,25 +62,17 @@ export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
const pageTitle = pageData && pageData.title
const pageDescription = pageData && pageData.description
const frontmatterHead = pageData && pageData.frontmatter.head

// update title and description
document.title = (pageTitle ? pageTitle + ` | ` : ``) + siteData.title
document
.querySelector(`meta[name=description]`)!
.setAttribute('content', pageDescription || siteData.description)

updateHeadTags([
['meta', { charset: 'utf-8' }],
[
'meta',
{
name: 'viewport',
content: 'width=device-width,initial-scale=1'
}
],
[
'meta',
{
name: 'description',
content: pageDescription || siteData.description
}
],
...siteData.head,
...((frontmatterHead && filterOutHeadDescription(frontmatterHead)) || [])
// site head can only change during dev
...(import.meta.env.DEV ? siteData.head : []),
...(frontmatterHead ? filterOutHeadDescription(frontmatterHead) : [])
])
})
}
Expand Down
3 changes: 3 additions & 0 deletions src/node/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,10 @@ export function createVitePressPlugin(
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="">
</head>
<body>
<div id="app"></div>
Expand Down

0 comments on commit e6bb5a4

Please sign in to comment.