preload, prefetch 预加载

今天在打包vue项目的时候，发现一个js会被加载了两次，看了index.html里有对css，js的preload，prefetch。
查了一下，发现了这个文章。https://juejin.im/post/5b5984b851882561da216311

Preload

Preload 是一个新的控制特定资源如何被加载的新的 Web 标准，这是已经在 2016 年 1 月废弃的 subresource prefetch 的升级版。这个指令可以在 <link> 中使用，比如 <link rel="preload">。一般来说，最好使用 preload 来加载你最重要的资源，比如图像，CSS，JavaScript 和字体文件。这不要与浏览器预加载混淆，浏览器预加载只预先加载在HTML中声明的资源。preload 指令事实上克服了这个限制并且允许预加载在 CSS 和JavaScript 中定义的资源，并允许决定何时应用每个资源。

使用 Preload 的好处

使用 preload 指令的好处包括：

• 允许浏览器来设定资源加载的优先级因此可以允许前端开发者来优化指定资源的加载。
• 赋予浏览器决定资源类型的能力，因此它能分辨这个资源在以后是否可以重复利用。
• 浏览器可以通过指定 as 属性来决定这个请求是否符合 content security policy。
• 浏览器可以基于资源的类型（比如 image/webp）来发送适当的 accept 头。

Prefetch

Prefetch 是一个低优先级的资源提示，允许浏览器在后台（空闲时）获取将来可能用得到的资源，并且将他们存储在浏览器的缓存中。一旦一个页面加载完毕就会开始下载其他的资源，然后当用户点击了一个带有 prefetched 的连接，它将可以立刻从缓存中加载内容。有三种不同的 prefetch 的类型，link，DNS 和 prerendering。