|
|
@@ -240,13 +240,11 @@ Provide a client build manifest object generated by `vue-ssr-webpack-plugin`. Wi
|
|
|
- only used in `createBundleRenderer`
|
|
|
- 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
|
|
|
const renderer = createBundleRenderer(serverBundle, {
|
|
|
@@ -255,9 +253,13 @@ const renderer = createBundleRenderer(serverBundle, {
|
|
|
shouldPreload: (file, type) => {
|
|
|
// type is inferred based on the file extension.
|
|
|
// https://fetch.spec.whatwg.org/#concept-request-destination
|
|
|
- if (type === 'script' || type === 'font') {
|
|
|
+ if (type === 'script') {
|
|
|
return true
|
|
|
}
|
|
|
+ if (type === 'font') {
|
|
|
+ // only preload woff2 fonts
|
|
|
+ return /\.woff2$/.test(file)
|
|
|
+ }
|
|
|
if (type === 'image') {
|
|
|
// only preload important images
|
|
|
return file === 'hero.jpg'
|
Evan You