msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

feat: use modulepreload links

Browse Source
pull/18/head
Evan You 4 years ago
parent f3ed7d560e
commit 0025af12f4
2 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File

31
src/build/render.ts
Unescape View File

@ -34,17 +34,19 @@ export async function renderPage(
const pageData = JSON.parse(__pageData) const pageData = JSON.parse(__pageData)
const assetPath = `${config.site.base}${ASSETS_DIR}` const assetPath = `${config.site.base}${ASSETS_DIR}`
const renderScript = (file: string) => {
return `<script type="module" async src="${assetPath}${file}"></script>`
}
const preloadLinks = [
// resolve imports for index.js + page.md.js and inject script tags for // resolve imports for index.js + page.md.js and inject script tags for
// them as well so we fetch everything as early as possible without having // them as well so we fetch everything as early as possible without having
// to wait for entry chunks to parse // to wait for entry chunks to parse
const pageImports = resolvePageImports(config, page, result) ...resolvePageImports(config, page, result),
const pageImportScripts = pageImports.length pageJsFileName,
? pageImports.map((i) => renderScript(i)).join('\n') + `\n ` 'index.js'
: `` ]
.map((file) => {
return `<link rel="modulepreload" href="${assetPath}${file}">`
})
.join('\n ')
const html = ` const html = `
<html lang="en-US"> <html lang="en-US">
@ -53,14 +55,14 @@ export async function renderPage(
config.site.title config.site.title
}</title> }</title>
<meta name="description" content="${config.site.description}"> <meta name="description" content="${config.site.description}">
<link rel="stylesheet" href="${assetPath}style.css">${renderHead( <link rel="stylesheet" href="${assetPath}style.css">
config.site.head ${preloadLinks}
)}${renderHead(pageData.frontmatter.head)} ${renderHead(config.site.head)}
${renderHead(pageData.frontmatter.head)}
</head> </head>
<body> <body>
<div id="app">${content}</div> <div id="app">${content}</div>
${pageImportScripts}${renderScript(pageJsFileName)} <script type="module" async src="${assetPath}index.js"></script>
${renderScript(`index.js`)}
</body> </body>
</html>`.trim() </html>`.trim()
const htmlFileName = path.join(config.outDir, page.replace(/\.md$/, '.html')) const htmlFileName = path.join(config.outDir, page.replace(/\.md$/, '.html'))
@ -89,9 +91,7 @@ function renderHead(head: HeadConfig[]) {
if (!head || !head.length) { if (!head || !head.length) {
return '' return ''
} }
return ( return head
`\n ` +
head
.map(([tag, attrs = {}, innerHTML = '']) => { .map(([tag, attrs = {}, innerHTML = '']) => {
const openTag = `<${tag}${renderAttrs(attrs)}>` const openTag = `<${tag}${renderAttrs(attrs)}>`
if (tag !== 'link' && tag !== 'meta') { if (tag !== 'link' && tag !== 'meta') {
@ -101,7 +101,6 @@ function renderHead(head: HeadConfig[]) {
} }
}) })
.join('\n ') .join('\n ')
)
} }
function renderAttrs(attrs: Record<string, string>): string { function renderAttrs(attrs: Record<string, string>): string {

4
src/markdownToVue.ts
Unescape View File

@ -50,10 +50,8 @@ export function createMarkdownToVueRenderFn(
? injectPageData(data.hoistedTags || [], pageData) ? injectPageData(data.hoistedTags || [], pageData)
: data.hoistedTags || [] : data.hoistedTags || []
// double wrapping since tempalte root node is never hoisted or turned into
// a static node.
const vueSrc = const vueSrc =
`<template><div><div class="vitepress-content">${html}</div></div></template>\n` + `<template><div class="vitepress-content">${html}</div></template>\n` +
additionalBlocks.join('\n') additionalBlocks.join('\n')
debug(`[render] ${file} in ${Date.now() - start}ms.`) debug(`[render] ${file} in ${Date.now() - start}ms.`)

Write Preview
Loading…
Cancel
Save