fix(hotfix): preload modern resource in spa modern mode (#5043)

This commit is contained in:
Xin Du (Clark) 2019-02-15 13:08:27 +00:00 committed by GitHub
parent 408680046c
commit 3516580701
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 9 deletions

View File

@ -73,16 +73,20 @@ export default class SPAMetaRenderer {
meta.resourceHints = '' meta.resourceHints = ''
const { clientManifest } = this.renderer.context.resources const { modernManifest, clientManifest } = this.renderer.context.resources
const manifest = this.options.modern ? modernManifest : clientManifest
const { shouldPreload, shouldPrefetch } = this.options.render.bundleRenderer const { shouldPreload, shouldPrefetch } = this.options.render.bundleRenderer
if (this.options.render.resourceHints && clientManifest) { if (this.options.render.resourceHints && manifest) {
const publicPath = clientManifest.publicPath || '/_nuxt/' const publicPath = manifest.publicPath || '/_nuxt/'
// Preload initial resources // Preload initial resources
if (Array.isArray(clientManifest.initial)) { if (Array.isArray(manifest.initial)) {
meta.resourceHints += clientManifest.initial const { crossorigin } = this.options.build
const cors = `${crossorigin ? ` crossorigin="${crossorigin}"` : ''}`
meta.resourceHints += manifest.initial
.map(SPAMetaRenderer.normalizeFile) .map(SPAMetaRenderer.normalizeFile)
.filter(({ fileWithoutQuery, asType }) => shouldPreload(fileWithoutQuery, asType)) .filter(({ fileWithoutQuery, asType }) => shouldPreload(fileWithoutQuery, asType))
.map(({ file, extension, fileWithoutQuery, asType }) => { .map(({ file, extension, fileWithoutQuery, asType }) => {
@ -90,15 +94,15 @@ export default class SPAMetaRenderer {
if (asType === 'font') { if (asType === 'font') {
extra = ` type="font/${extension}" crossorigin` extra = ` type="font/${extension}" crossorigin`
} }
return `<link rel="preload" href="${publicPath}${file}"${ return `<link rel="${this.options.modern ? 'module' : ''}preload"${cors} href="${publicPath}${file}"${
asType !== '' ? ` as="${asType}"` : ''}${extra}>` asType !== '' ? ` as="${asType}"` : ''}${extra}>`
}) })
.join('') .join('')
} }
// Prefetch async resources // Prefetch async resources
if (Array.isArray(clientManifest.async)) { if (Array.isArray(manifest.async)) {
meta.resourceHints += clientManifest.async meta.resourceHints += manifest.async
.map(SPAMetaRenderer.normalizeFile) .map(SPAMetaRenderer.normalizeFile)
.filter(({ fileWithoutQuery, asType }) => shouldPrefetch(fileWithoutQuery, asType)) .filter(({ fileWithoutQuery, asType }) => shouldPrefetch(fileWithoutQuery, asType))
.map(({ file }) => `<link rel="prefetch" href="${publicPath}${file}">`) .map(({ file }) => `<link rel="prefetch" href="${publicPath}${file}">`)

View File

@ -31,7 +31,7 @@ describe('modern client mode (SPA)', () => {
expect(response).toContain('<script type="module" src="/_nuxt/modern-commons.app.js" crossorigin="use-credentials"') expect(response).toContain('<script type="module" src="/_nuxt/modern-commons.app.js" crossorigin="use-credentials"')
}) })
test.skip('should contain module preload resources', async () => { test('should contain module preload resources', async () => {
const response = await rp(url('/')) const response = await rp(url('/'))
expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/modern-app.js" as="script">') expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/modern-app.js" as="script">')
expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/modern-commons.app.js" as="script">') expect(response).toContain('<link rel="modulepreload" crossorigin="use-credentials" href="/_nuxt/modern-commons.app.js" as="script">')