今天在打包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。
备注
当能确定网页在未来一定会使用到某个资源时，开发者可以让浏览器提前请求并且缓存好以供后续使用。prefetch支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。对于当前页面很有必要的资源使用preload，对于可能在将来的页面中使用的资源使用prefetch。
作者：大乔是个美少女
链接：https://www.jianshu.com/p/d2c86e73c4b1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
