You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 21, 2021. It is now read-only.
[Preload](https://w3c.github.io/preload/) is a web standard aimed at improving performance
21
+
[Preload](https://w3c.github.io/preload/) is a web standard aimed at improving performance
22
22
and granular loading of resources. It is a declarative fetch that can tell a browser to start fetching a
23
23
source because a developer knows the resource will be needed soon. [Preload: What is it good for?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)
24
24
is a recommended read if you haven't used the feature before.
25
25
26
26
In simple web apps, it's straight-forward to specify static paths to scripts you
27
-
would like to preload - especially if their names or locations are unlikely to change. In more complex apps,
28
-
JavaScript can be split into "chunks" (that represent routes or components) at with dynamic
27
+
would like to preload - especially if their names or locations are unlikely to change. In more complex apps,
28
+
JavaScript can be split into "chunks" (that represent routes or components) at with dynamic
29
29
names. These names can include hashes, numbers and other properties that can change with each build.
30
30
31
31
For example, `chunk.31132ae6680e598f8879.js`.
32
32
33
-
To make it easier to wire up async chunks for lazy-loading, this plugin offers a drop-in way to wire them up
33
+
To make it easier to wire up async chunks for lazy-loading, this plugin offers a drop-in way to wire them up
34
34
using `<link rel='preload'>`.
35
35
36
36
Pre-requisites
37
37
--------------
38
-
This module requires Webpack 2.2.0 and above. It also requires that you're using
39
-
[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) in your Webpack project.
38
+
This module requires Webpack 2.2.0 and above. It also requires that you're using
39
+
[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) in your Webpack project.
40
40
41
41
Installation
42
42
---------------
@@ -68,30 +68,68 @@ and finally, configure the plugin in your Webpack `plugins` array after `HtmlWeb
68
68
plugins: [
69
69
newHtmlWebpackPlugin(),
70
70
newPreloadWebpackPlugin()
71
-
]
71
+
]
72
+
```
73
+
74
+
When preloading files, the plugin will use different `as` attribute depends on the type of each
75
+
file. For each file ends with `.css`, the plugin will preload it with `as=style`, for each file ends
76
+
with `.woff2`, the plugin will preload it with `as=font`, while for all other files, `as=script`
77
+
will be used.
78
+
79
+
If you do not prefer to determine `as` attribute depends on suffix of filename, you can also
80
+
explicitly name it using `as`:
81
+
82
+
```javascript
83
+
plugins: [
84
+
newHtmlWebpackPlugin(),
85
+
newPreloadWebpackPlugin({
86
+
rel:'preload',
87
+
as:'script'
88
+
})
89
+
]
72
90
```
73
91
74
-
By default, the plugin will assume async script chunks will be preloaded with `as=script`.
75
-
This is the equivalent of:
92
+
In case you need more fine-grained control of the `as` atribute, you could also provide a function here.
93
+
When using it, entry name will be provided as the parameter, and function itself should return a
94
+
string for `as` attribute:
95
+
96
+
```javascript
97
+
plugins: [
98
+
newHtmlWebpackPlugin(),
99
+
newPreloadWebpackPlugin({
100
+
rel:'preload',
101
+
as(entry) {
102
+
if (/\.css$/.test(entry)) return'style';
103
+
if (/\.woff$/.test(entry)) return'font';
104
+
if (/\.png$/.test(entry)) return'image';
105
+
return'script';
106
+
}
107
+
})
108
+
]
109
+
```
110
+
111
+
Notice that if `as=font` is used in preload, crossorigin will be added, otherwise the font resource
112
+
might be double fetched. Explains can be found in [this article](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf).
113
+
114
+
By default, the plugin will assume async script chunks will be preloaded. This is the equivalent of:
76
115
77
116
```js
78
117
plugins: [
79
118
newHtmlWebpackPlugin(),
80
119
newPreloadWebpackPlugin({
81
120
rel:'preload',
82
-
as:'script',
83
121
include:'asyncChunks'
84
122
})
85
123
]
86
124
```
87
125
88
-
For a project generating two async scripts with dynamically generated names, such as
126
+
For a project generating two async scripts with dynamically generated names, such as
89
127
`chunk.31132ae6680e598f8879.js` and `chunk.d15e7fdfc91b34bb78c4.js`, the following preloads
0 commit comments