开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情
前言
前面我们已经做了代码分割，同时会使用 import 动态导入语法来进行代码按需加载(按需加载也叫懒加载,比如路由懒加载就是通过 import 实现的)但是加载速度还可以进行优化,比如：现在是用户点击按钮时才加载用到的资源，如果资源体积很大，那么用户就会感觉到明显卡顿效果。那么我们就可以从这个角度出发去进行我们代码的优化，我们就可以在浏览器空闲的时间，加载后续需要使用的资源。这时我们就需要用上 Preload 或 Prefetch 技术。
Preload / Prefetch
Preload：告诉浏览器立即加载资源。Prefetch：告诉浏览器在空闲时才开始加载资源。
共同点:
- 都只会加载资源，并不执行。
- 都有缓存。
区别：
- Preload加载优先级高，Prefetch加载优先级低。
- Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。
Preload / Prefetch 问题在于兼容性会比较差，我们可以去 Can I Use 网站查询 API 的兼容性问题。Preload 相对于 Prefetch 兼容性好一点。
使用
使用的话需要安装下面的插件:
npm i @vue/preload-webpack-plugin -D
配置:
// webpack.prod.js
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
new PreloadWebpackPlugin({
rel: "preload", // preload兼容性更好
as: "script",
// rel: 'prefetch' // prefetch兼容性更差
})
开启preload可以看到打包后的HTML文件中动态引入的script文件增加了rel="preload"属性。
// webpack.prod.js
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
new PreloadWebpackPlugin({
// rel: "preload", // preload兼容性更好
// as: "script",
rel: 'prefetch' // prefetch兼容性更差
})
开启prefetch可以看到打包后的HTML文件中动态引入的script文件增加了rel="prefetch"属性，运行代码发现控制台动态引入的文件的线程优先级变为最低的lowest，也就是当浏览器最空闲时进行加载 ,再点击按钮后可以看到是通过调用缓存来运行的代码(prefetch cache)。
小结
- 当前页面优先级高的资源用Preload`加载。
- 下一个页面需要使用的资源用Prefetch`加载。
以更文促进学习的第14天，继续加油！
