webpack学习笔记-webpack优化代码运行性能-Preload和Prefetch

Preload与Prefetch

我们前面已经做了code split，同时会使用import() 动态导入语法来进行代码按需加载（或者是懒加载，例如路由懒加载就是这样实现的）。但是加载速度还不够好，比如：用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉明显卡顿，我们想在浏览器空闲时间去加载后续需要使用的资源。这里就使用上 Preload和Prefetch。

• Prelaod: 告诉浏览器立即加载资源
• Prefetch: 告诉浏览器在空闲时间才开始加载资源

Preload 与 Prefetch 的共同点：

• 它们都是只加载资源，并不执行。
• 都有缓存

Preload 与 Prefetch 的区别：

• Preload 加载的优先级高，prefetch 加载的优先级低
• Preload 只能加载当前页面需要使用的资源，Prefetch 不仅可以加载当前页面的资源，还可以加载其他页面的资源。

Preload 与 Prefetch 的缺点：

兼容性差，我们可以去Can I Use查询api的兼容性

• Preload

• Prefetch

我们在webpack中怎么使用preload与prefetch

• 下载插件 @vue/preload-webpack-plugin

npm install @vue/preload-webpack-plugin --save-dev

• 在webpack.config.js中配置

const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin')
medule.exports={
  ...
  plugins:[
    new PreloadWebpackPlugin({
      rel:'preload', // preload | prefetch
      as:'script'
    })
  ]
}

• npm run build 打包

这是preload打包后的html文件

这是prefetch 打包后的html文件