我们前面已经做了代码分割,分成chunk,同时会使用 import 动态导入语法来进行代码按需加载(我们也叫懒加载,比如路由懒加载就是这样实现的)。
但是加载速度还不够好,比如:是用户点击按钮时才加载这个资源的,如果资源体积很大,那么用户会感觉到明显卡顿效果。
我们想在浏览器空闲时间,加载后续需要使用的资源。我们就需要用上 Preload 或 Prefetch 技术。
Preload:告诉浏览器立即加载资源。
Prefetch:告诉浏览器在空闲时才开始加载资源
相同点:都只会加载资源,并不执行。 都有缓存(之后立马加载)。
不同点:Preload加载优先级高,Prefetch加载优先级低。Preload只能加载当前页面需要使用的资源,Prefetch既可以加载当前页面资源,也可以加载下一个页面需要使用的资源。
当前页面优先级高的资源用 Preload 加载。下一个页面需要使用的资源用 Prefetch 加载。它们的问题:兼容性较差
查询 css,js,API 的兼容性问题:https://caniuse.com/?search=preload
![](https://i-blog.csdnimg.cn/blog_migrate/484bab6039eac695942b04412fa93a05.png)
Preload 相对于 Prefetch 兼容性好一点。
https://www.npmjs.com/package/@vue/preload-webpack-plugin
使用上述包
npm i @vue/preload-webpack-plugin -D
使用:引入+调用
Preload
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
// new CssMinimizerPlugin(),
new PreloadWebpackPlugin({
rel: "preload", // preload兼容性更好
as: "script",
}),
![](https://i-blog.csdnimg.cn/blog_migrate/2c609d750dd514e4834fb26db25f8f11.png)
prefetch
// new CssMinimizerPlugin(),
new PreloadWebpackPlugin({
as: "script",
rel: 'prefetch' // prefetch兼容性更差
}),
在浏览器空闲的时候加载,最后的时候空闲的时候加载
![](https://i-blog.csdnimg.cn/blog_migrate/8f1fe5018d5d913e166e6f725b839fb3.png)