preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源
prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源
prefetch ,它的作用是告诉浏览器加载下一页面可能会用到的资源，注意，是下一页面，而不是当前页面。因此该方法的加载优先级非常低，也就是说该方式的作用是加速下一个页面的加载速度
preload 好处：
1、将加载和执行分离开，不阻塞渲染和document的onload事件
2、提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出的情况
3、Preload 有 as 属性，浏览器可以设置正确的资源加载优先级，这种方式可以确保资源根据其重要性依次加载， 所以，Preload既不会影响重要资源的加载，又不会让次要资源影响自身的加载；浏览器能根据 as 的值发送适当的 Accept 头部信息；浏览器通过 as 值能得知资源类型，因此当获取的资源相同时，浏览器能够判断前面获取的资源是否能重用
4、如果忽略 as 属性，或者错误的 as 属性会使 preload 等同于 XHR 请求，浏览器不知道加载的是什么，因此会赋予此类资源非常低的加载优先级
preload 二次获取
1、如果对所 preload 的资源不使用明确的 “as” 属性，将会导致二次获取
2、 preload 字体不带 crossorigin 会二次获取！ 确保对 preload 的字体添加 crossorigin 属性，否则字体文件会被下载两次，这个请求使用匿名的跨域模式。这个建议也适用于字体文件在相同域名下，也适用于其他域名的获取(比如说默认的异步获取)
webpack
webpack 4.6.0+ adds support for prefetching and preloading.
1 preload 加载平行于 主要加载项目， prefetch 在主要加载项完成后加载
2 preload 中等优先度，会立即下载， prefetch 会在空闲（idle）时下载
3 preload 内容 通过 父chunk 会被立即用到， prefetch 内容会在将来用到
prefetch 案例： HomePage component 里有 LoginBotton component , 点击 按钮是会加载LoginModal
LoginButton.js
[cc lang=”js”]import(/* webpackPrefetch: true */ ‘LoginModal’);[/cc]
result in
prelaod 案例： ChartComponent 需要 比较大的 ChartingLibrary， 加载完页面就需要用到ChartingLibrary 里的 LoadingIndicator
ChartComponent.js
[cc lang=”js”]import(/* webpackPreload: true */ ‘ChartingLibrary’);[/cc]
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c