Webpack高级学习：Preload / Prefetch

我们前面已经做了代码分割，分成chunk,同时会使用 import 动态导入语法来进行代码按需加载（我们也叫懒加载，比如路由懒加载就是这样实现的）。

但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果。

我们想在浏览器空闲时间，加载后续需要使用的资源。我们就需要用上 Preload 或 Prefetch 技术。

---

Preload：告诉浏览器立即加载资源。

Prefetch：告诉浏览器在空闲时才开始加载资源

---

1. 相同点：都只会加载资源，并不执行。 都有缓存（之后立马加载）。

2. 不同点：Preload加载优先级高，Prefetch加载优先级低。Preload只能加载当前页面需要使用的资源，Prefetch既可以加载当前页面资源，也可以加载下一个页面需要使用的资源。

---

当前页面优先级高的资源用 Preload 加载。下一个页面需要使用的资源用 Prefetch 加载。它们的问题：兼容性较差

查询 css,js，API 的兼容性问题：https://caniuse.com/?search=preload

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",
    }),

prefetch

  // new CssMinimizerPlugin(),
    new PreloadWebpackPlugin({
     
      as: "script",
       rel: 'prefetch' // prefetch兼容性更差
    }),

在浏览器空闲的时候加载，最后的时候空闲的时候加载