二者应用场景:


preload:预加载,比如图片资源、字体元素等需要提前加载,比如 强制将字体请求放到css资源请求之前


 



<head>
...
<link rel="prefetch" href="static/img/ticket_bg.a5bb7c33.png">
...
</head>


prefetch预提取: 比如页面缓存,在生命周期或者页面加载完成之后去加载大概率会访问到的资源,比如 loading 图片


 



<head>
...
<link rel="preload" as="font" href="<%= require('/assets/fonts/AvenirNextLTPro-Demi.otf') %>" crossorigin>
<link rel="preload" as="font" href="<%= require('/assets/fonts/AvenirNextLTPro-Regular.otf') %>" crossorigin>
...
</head>



 



preload-webpack-plugin  插件配合webpack可以配置,见下面链接