Inicio Explorar Axuda
Rexistro Iniciar sesión
vuejs
/
vue
réplica de https://github.com/vuejs/vue.git
2
0
Fork 0
Ficheiros Incidencias 0 Wiki
Explorar o código

ssr: only preload scripts by default

Evan You %!s(int64=9) %!d(string=hai) anos
pai
d2ff956b94
achega
924435a0fa
Modificáronse 3 ficheiros con 14 adicións e 13 borrados
Unificar vista Mostrar estatísticas de Diff
  1. 8 6
      packages/vue-server-renderer/README.md
  2. 2 2
      src/server/template-renderer/index.js
  3. 4 5
      test/ssr/ssr-template.spec.js

+ 8 - 6
packages/vue-server-renderer/README.md
Ver ficheiro 

@@ -240,13 +240,11 @@ Provide a client build manifest object generated by `vue-ssr-webpack-plugin`. Wi
 
 - only used in `createBundleRenderer`
 
 - only used in `createBundleRenderer`
 
 - only used when the `template` and `clientManifest` options are also provided
 
 - only used when the `template` and `clientManifest` options are also provided
 
 
 
-When a client manifest is present, the renderer will automatically inject [preload and prefetch directives](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) into the `<head>` section. By default, an asset will be preloaded when:
 
+When a client manifest is present, the renderer will automatically inject [preload and prefetch directives](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) into the `<head>` section.
 
 
 
-- It is used during the render. For example, if your bundle uses code split, only assets used by the chunks that were used during a render will be injected.
 
+By default, only JavaScript chunks used during the server-side render will be preloaded, as they are absolutely needed for your application to boot.
 
 
 
-- It is of type `script` or `font`, because these are crucial for faster time-to-fisrt-paint / time-to-interaction. Images and other types of assets are **not** preloaded by default.
 
-
 
-If you do want to preload assets other than scripts and fonts, `shouldPreload` gives you full control:
 
+For other types of assets such as images or fonts, how much and what to preload will be scenario-dependent. You can control precisely what to preload using the `shouldPreload` option:
 
 
 
 ``` js
 
 ``` js
 
 const renderer = createBundleRenderer(serverBundle, {
 
 const renderer = createBundleRenderer(serverBundle, {
 
@@ -255,9 +253,13 @@ const renderer = createBundleRenderer(serverBundle, {
 
   shouldPreload: (file, type) => {
 
   shouldPreload: (file, type) => {
 
     // type is inferred based on the file extension.
 
     // type is inferred based on the file extension.
 
     // https://fetch.spec.whatwg.org/#concept-request-destination
 
     // https://fetch.spec.whatwg.org/#concept-request-destination
 
-    if (type === 'script' || type === 'font') {
 
+    if (type === 'script') {
 
       return true
 
       return true
 
     }
 
     }
 
+    if (type === 'font') {
 
+      // only preload woff2 fonts
 
+      return /\.woff2$/.test(file)
 
+    }
 
     if (type === 'image') {
 
     if (type === 'image') {
 
       // only preload important images
 
       // only preload important images
 
       return file === 'hero.jpg'
 
       return file === 'hero.jpg'

+ 2 - 2
src/server/template-renderer/index.js
Ver ficheiro 

@@ -92,8 +92,8 @@ export default class TemplateRenderer {
 
         const ext = path.extname(withoutQuery).slice(1)
 
         const ext = path.extname(withoutQuery).slice(1)
 
         const type = getPreloadType(ext)
 
         const type = getPreloadType(ext)
 
         const shouldPreload = this.options.shouldPreload
 
         const shouldPreload = this.options.shouldPreload
 
-        // by default, we only preload scripts and fonts
 
-        if (!shouldPreload && type !== 'script' && type !== 'font') {
 
+        // by default, we only preload scripts
 
+        if (!shouldPreload && type !== 'script') {
 
           return ''
 
           return ''
 
         }
 
         }
 
         // user wants to explicitly control what to preload
 
         // user wants to explicitly control what to preload

+ 4 - 5
test/ssr/ssr-template.spec.js
Ver ficheiro 

@@ -146,16 +146,15 @@ describe('SSR: template option', () => {
 
     })
 
     })
 
   })
 
   })
 
 
 
-  const expectedHTMLWithManifest = preloadImage =>
 
+  const expectedHTMLWithManifest = preloadOtherAssets =>
 
     `<html><head>` +
 
     `<html><head>` +
 
       // used chunks should have preload
 
       // used chunks should have preload
 
       `<link rel="preload" href="/manifest.js" as="script">` +
 
       `<link rel="preload" href="/manifest.js" as="script">` +
 
       `<link rel="preload" href="/main.js" as="script">` +
 
       `<link rel="preload" href="/main.js" as="script">` +
 
       `<link rel="preload" href="/0.js" as="script">` +
 
       `<link rel="preload" href="/0.js" as="script">` +
 
-      // images are only preloaded when explicitly asked for
 
-      (preloadImage ? `<link rel="preload" href="/test.png" as="image">` : ``) +
 
-      // critical assets like fonts are preloaded by default
 
-      `<link rel="preload" href="/test.woff2" as="font" type="font/woff2" crossorigin>` +
 
+      // images and fonts are only preloaded when explicitly asked for
 
+      (preloadOtherAssets ? `<link rel="preload" href="/test.png" as="image">` : ``) +
 
+      (preloadOtherAssets ? `<link rel="preload" href="/test.woff2" as="font" type="font/woff2" crossorigin>` : ``) +
 
       // unused chunks should have prefetch
 
       // unused chunks should have prefetch
 
       `<link rel="prefetch" href="/1.js" as="script">` +
 
       `<link rel="prefetch" href="/1.js" as="script">` +
 
     `</head><body>` +
 
     `</head><body>` +