prefetch 和preload_Preload和Prefetch以及前端项目中的配置

1.vuecli3.x or 4.x默认打包之后，部署到服务器上的项目，会对静态资源的标签上默认加载preload或者prefetch属性，

啥是preload和prefetch呢？

Preload的设计初衷是为了让当前页面的关键资源尽早被发现和加载，从而提升首屏渲染性能。

Prefetch是为了提前加载下一个导航所需的资源，提升下一次导航的首屏渲染性能。但也可以用来在当前页面提前加载运行过程中所需的资源，加速响应。

2.项目当中默认打包后的代码部署到服务器上，首屏加载如下图：

请求数量 和资源大小，以及dom渲染，页面渲染时间如下图：

打开dom面板，能看到一些静态资源文件被加上了proload和prefetch，

3.当在vue.config.js中webpack配置中做如下配置：

// vue.config.js

module.exports = {

chainWebpack: config => {

config.plugins.delete("preload")

config.plugins.delete("prefetch")

}

}

4.在打包部署服务器，清缓存访问一次项目首屏

静态资源中无preload和prefetch那写东西

紧接着，我们对两次加载数据进行一个对比：

未删除preload和prefetch 已删除preload和prefetch

637 requests 11 requests

3.6 MB transferred 1.4 MB transferred

4.3 MB resources 4.3 MB resources

Finish: 3.10 s Finish: 1.38 s

DOMContentLoaded: 1.27 s DOMContentLoaded: 705 ms

Load: 2.49 s Load: 1.29 s

preload和prefetch都是预加载的用法，通过对比得第二次时间较短。

一般是用不到这两个属性的，不过为了首屏加载速度快点，一般都会删除这两个配置。