feat(ssr): add shouldPrefetch option

close #5964

Author: yyx990803

src/server/create-renderer.js

@@ -27,6 +27,7 @@ export type RenderOptions = {
   inject?: boolean;
   basedir?: string;
   shouldPreload?: Function;
+  shouldPrefetch?: Function;
   clientManifest?: ClientManifest;
   runInNewContext?: boolean | 'once';
 };
@@ -39,13 +40,15 @@ export function createRenderer ({
   inject,
   cache,
   shouldPreload,
+  shouldPrefetch,
   clientManifest
 }: RenderOptions = {}): Renderer {
   const render = createRenderFunction(modules, directives, isUnaryTag, cache)
   const templateRenderer = new TemplateRenderer({
     template,
     inject,
     shouldPreload,
+    shouldPrefetch,
     clientManifest
   })
 

src/server/template-renderer/index.js

@@ -15,6 +15,7 @@ type TemplateRendererOptions = {
   inject?: boolean;
   clientManifest?: ClientManifest;
   shouldPreload?: (file: string, type: string) => boolean;
+  shouldPrefetch?: (file: string, type: string) => boolean;
 };
 
 export type ClientManifest = {
@@ -30,7 +31,7 @@ export type ClientManifest = {
   }
 };
 
-type PreloadFile = {
+type Resource = {
   file: string;
   extension: string;
   fileWithoutQuery: string;
@@ -43,8 +44,8 @@ export default class TemplateRenderer {
   parsedTemplate: ParsedTemplate | null;
   publicPath: string;
   clientManifest: ClientManifest;
-  preloadFiles: Array<string>;
-  prefetchFiles: Array<string>;
+  preloadFiles: Array<Resource>;
+  prefetchFiles: Array<Resource>;
   mapFiles: AsyncFileMapper;
 
   constructor (options: TemplateRendererOptions) {
@@ -61,8 +62,8 @@ export default class TemplateRenderer {
       const clientManifest = this.clientManifest = options.clientManifest
       this.publicPath = clientManifest.publicPath.replace(/\/$/, '')
       // preload/prefetch directives
-      this.preloadFiles = clientManifest.initial
-      this.prefetchFiles = clientManifest.async
+      this.preloadFiles = (clientManifest.initial || []).map(normalizeFile)
+      this.prefetchFiles = (clientManifest.async || []).map(normalizeFile)
       // initial async chunk mapping
       this.mapFiles = createMapper(clientManifest)
     }
@@ -125,30 +126,21 @@ export default class TemplateRenderer {
     return this.renderPreloadLinks(context) + this.renderPrefetchLinks(context)
   }
 
-  getPreloadFiles (context: Object): Array<PreloadFile> {
+  getPreloadFiles (context: Object): Array<Resource> {
     const usedAsyncFiles = this.getUsedAsyncFiles(context)
     if (this.preloadFiles || usedAsyncFiles) {
-      return (this.preloadFiles || []).concat(usedAsyncFiles || []).map(file => {
-        const withoutQuery = file.replace(/\?.*/, '')
-        const extension = path.extname(withoutQuery).slice(1)
-        return {
-          file,
-          extension,
-          fileWithoutQuery: withoutQuery,
-          asType: getPreloadType(extension)
-        }
-      })
+      return (this.preloadFiles || []).concat(usedAsyncFiles || [])
     } else {
       return []
     }
   }
 
   renderPreloadLinks (context: Object): string {
     const files = this.getPreloadFiles(context)
+    const shouldPreload = this.options.shouldPreload
     if (files.length) {
       return files.map(({ file, extension, fileWithoutQuery, asType }) => {
         let extra = ''
-        const shouldPreload = this.options.shouldPreload
         // by default, we only preload scripts or css
         if (!shouldPreload && asType !== 'script' && asType !== 'style') {
           return ''
@@ -174,17 +166,20 @@ export default class TemplateRenderer {
   }
 
   renderPrefetchLinks (context: Object): string {
+    const shouldPrefetch = this.options.shouldPrefetch
     if (this.prefetchFiles) {
       const usedAsyncFiles = this.getUsedAsyncFiles(context)
       const alreadyRendered = file => {
-        return usedAsyncFiles && usedAsyncFiles.some(f => f === file)
+        return usedAsyncFiles && usedAsyncFiles.some(f => f.file === file)
       }
-      return this.prefetchFiles.map(file => {
-        if (!alreadyRendered(file)) {
-          return `<link rel="prefetch" href="${this.publicPath}/${file}">`
-        } else {
+      return this.prefetchFiles.map(({ file, fileWithoutQuery, asType }) => {
+        if (shouldPrefetch && !shouldPrefetch(fileWithoutQuery, asType)) {
+          return ''
+        }
+        if (alreadyRendered(file)) {
           return ''
         }
+        return `<link rel="prefetch" href="${this.publicPath}/${file}">`
       }).join('')
     } else {
       return ''
@@ -205,20 +200,21 @@ export default class TemplateRenderer {
 
   renderScripts (context: Object): string {
     if (this.clientManifest) {
-      const initial = this.clientManifest.initial
+      const initial = this.preloadFiles
       const async = this.getUsedAsyncFiles(context)
       const needed = [initial[0]].concat(async || [], initial.slice(1))
-      return needed.filter(isJS).map(file => {
+      return needed.filter(({ file }) => isJS(file)).map(({ file }) => {
         return `<script src="${this.publicPath}/${file}" defer></script>`
       }).join('')
     } else {
       return ''
     }
   }
 
-  getUsedAsyncFiles (context: Object): ?Array<string> {
+  getUsedAsyncFiles (context: Object): ?Array<Resource> {
     if (!context._mappedFiles && context._registeredComponents && this.mapFiles) {
-      context._mappedFiles = this.mapFiles(Array.from(context._registeredComponents))
+      const registered = Array.from(context._registeredComponents)
+      context._mappedFiles = this.mapFiles(registered).map(normalizeFile)
     }
     return context._mappedFiles
   }
@@ -232,6 +228,17 @@ export default class TemplateRenderer {
   }
 }
 
+function normalizeFile (file: string): Resource {
+  const withoutQuery = file.replace(/\?.*/, '')
+  const extension = path.extname(withoutQuery).slice(1)
+  return {
+    file,
+    extension,
+    fileWithoutQuery: withoutQuery,
+    asType: getPreloadType(extension)
+  }
+}
+
 function getPreloadType (ext: string): string {
   if (ext === 'js') {
     return 'script'

test/ssr/ssr-template.spec.js

@@ -230,7 +230,7 @@ describe('SSR: template option', () => {
       (options.preloadOtherAssets ? `<link rel="preload" href="/test.png" as="image">` : ``) +
       (options.preloadOtherAssets ? `<link rel="preload" href="/test.woff2" as="font" type="font/woff2" crossorigin>` : ``) +
       // unused chunks should have prefetch
-      `<link rel="prefetch" href="/1.js">` +
+      (options.noPrefetch ? `` : `<link rel="prefetch" href="/1.js">`) +
       // css assets should be loaded
       `<link rel="stylesheet" href="/test.css">` +
     `</head><body>` +
@@ -281,6 +281,29 @@ describe('SSR: template option', () => {
       })
     })
 
+    it('bundleRenderer + renderToStream + clientManifest + shouldPrefetch', done => {
+      createRendererWithManifest('split.js', {
+        runInNewContext,
+        shouldPrefetch: (file, type) => {
+          if (type === 'script') {
+            return false
+          }
+        }
+      }, renderer => {
+        const stream = renderer.renderToStream({ state: { a: 1 }})
+        let res = ''
+        stream.on('data', chunk => {
+          res += chunk.toString()
+        })
+        stream.on('end', () => {
+          expect(res).toContain(expectedHTMLWithManifest({
+            noPrefetch: true
+          }))
+          done()
+        })
+      })
+    })
+
     it('bundleRenderer + renderToString + clientManifest + inject: false', done => {
       createRendererWithManifest('split.js', {
         runInNewContext,