test/vue
1
0
Fork 0
mirror of https://gitee.com/vuejs/vue.git synced 2024-12-02 12:07:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

ssr: only preload scripts by default

Browse Source
This commit is contained in:
Evan You 2017-03-31 17:42:56 +08:00
parent d2ff956b94
commit 924435a0fa
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/vue-server-renderer/README.md
View File

@ -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'

4
src/server/template-renderer/index.js
View File

@ -92,8 +92,8 @@ export default class TemplateRenderer {
const ext = path.extname(withoutQuery).slice(1)
const type = getPreloadType(ext)
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 ''
}
// user wants to explicitly control what to preload

9
test/ssr/ssr-template.spec.js
View File

@ -146,16 +146,15 @@ describe('SSR: template option', () => {
})
})
const expectedHTMLWithManifest = preloadImage =>
const expectedHTMLWithManifest = preloadOtherAssets =>
`<html><head>` +
// used chunks should have preload
`<link rel="preload" href="/manifest.js" as="script">` +
`<link rel="preload" href="/main.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
`<link rel="prefetch" href="/1.js" as="script">` +
`</head><body>` +