html首页源码_从Vue生产代码index.html看prefetch和preload

生产代码index.html示例

以下是一张执行了npm run build之后的index.html的源码。可以看到，除了最后一个rel是preload，其余的都是prefetch。可以看出Vue cli使用preload和prefetch来改善性能。

preload

通常在页面中我们需要加载脚本和样式，preload可以对当前页面所需要的脚本、样式等资源进行预加载，而无需等到解析到script和link标签时才进行加载。这一机制使得资源可以更早的得到并可用，且不易阻塞页面的初步渲染，进而提升性能。

prefetch

prefetch和preload一样都是对资源进行预加载，但是prefetch加载的资源一般不是用于当前页面，而是其他页面用到的资源。prefetch不会像preload一样，在页面渲染的时候加载资源，而是等浏览器空闲下来的时候再去下载。当真正打开对应页面时，直接从缓存中取，既不影响当前页面的渲染，又提高了其他页面加载和渲染的速度。

网络请求对比

对于如下源码：

<link href="app.js" rel="preload" as="script>

首页加载时的一个真实网络请求为：

可以看出传输了5.8M，资源加载了5.8M。

对于如下源码：

<link href="app.js" rel="preload" as="script>

首页加载时的一个真实网络请求为：

可以看出传输了5.8M，资源加载了0。

当真正用到这个资源的网页打开时，资源才会从缓存里面加载。