feat(spa): support shouldPrefetch and shouldPreload

This commit is contained in:
Pooya Parsa 2018-03-20 12:04:39 +03:30
parent 18f80676f7
commit 160e1d35e4

View File

@ -43,12 +43,16 @@ export default class MetaRenderer {
HEAD: '', HEAD: '',
BODY_SCRIPTS: '' BODY_SCRIPTS: ''
} }
// Get vue-meta context // Get vue-meta context
const m = await this.getMeta(url) const m = await this.getMeta(url)
// HTML_ATTRS // HTML_ATTRS
meta.HTML_ATTRS = m.htmlAttrs.text() meta.HTML_ATTRS = m.htmlAttrs.text()
// BODY_ATTRS // BODY_ATTRS
meta.BODY_ATTRS = m.bodyAttrs.text() meta.BODY_ATTRS = m.bodyAttrs.text()
// HEAD tags // HEAD tags
meta.HEAD = meta.HEAD =
m.meta.text() + m.meta.text() +
@ -57,28 +61,40 @@ export default class MetaRenderer {
m.style.text() + m.style.text() +
m.script.text() + m.script.text() +
m.noscript.text() m.noscript.text()
// BODY_SCRIPTS // BODY_SCRIPTS
meta.BODY_SCRIPTS = m.script.text({ body: true }) + m.noscript.text({ body: true }) meta.BODY_SCRIPTS = m.script.text({ body: true }) + m.noscript.text({ body: true })
// Resources Hints // Resources Hints
meta.resourceHints = '' meta.resourceHints = ''
// Resource Hints
const clientManifest = this.renderer.resources.clientManifest const clientManifest = this.renderer.resources.clientManifest
const shouldPreload = this.options.render.bundleRenderer.shouldPreload || (() => true)
const shouldPrefetch = this.options.render.bundleRenderer.shouldPrefetch || (() => true)
if (this.options.render.resourceHints && clientManifest) { if (this.options.render.resourceHints && clientManifest) {
const publicPath = clientManifest.publicPath || '/_nuxt/' const publicPath = clientManifest.publicPath || '/_nuxt/'
// Pre-Load initial resources
// Preload initial resources
if (Array.isArray(clientManifest.initial)) { if (Array.isArray(clientManifest.initial)) {
meta.resourceHints += clientManifest.initial meta.resourceHints += clientManifest.initial
.filter(file => shouldPreload(file))
.map( .map(
r => `<link rel="preload" href="${publicPath}${r}" as="script" />` r => `<link rel="preload" href="${publicPath}${r}" as="script" />`
) )
.join('') .join('')
} }
// Pre-Fetch async resources // Pre-Fetch async resources
if (Array.isArray(clientManifest.async)) { if (Array.isArray(clientManifest.async)) {
meta.resourceHints += clientManifest.async meta.resourceHints += clientManifest.async
.filter(file => shouldPrefetch(file))
.map(r => `<link rel="prefetch" href="${publicPath}${r}" />`) .map(r => `<link rel="prefetch" href="${publicPath}${r}" />`)
.join('') .join('')
} }
// Add them to HEAD // Add them to HEAD
if (meta.resourceHints) { if (meta.resourceHints) {
meta.HEAD += meta.resourceHints meta.HEAD += meta.resourceHints
@ -87,12 +103,14 @@ export default class MetaRenderer {
// Emulate getPreloadFiles from vue-server-renderer (works for JS chunks only) // Emulate getPreloadFiles from vue-server-renderer (works for JS chunks only)
meta.getPreloadFiles = () => meta.getPreloadFiles = () =>
clientManifest.initial.map(r => ({ clientManifest.initial
file: r, .filter(file => shouldPreload(file))
fileWithoutQuery: r, .map(r => ({
asType: 'script', file: r,
extension: 'js' fileWithoutQuery: r,
})) asType: 'script',
extension: 'js'
}))
// Set meta tags inside cache // Set meta tags inside cache
this.cache.set(url, meta) this.cache.set(url, meta)