preload预加载 和 prefetch预提取


二者应用场景：
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可以配置，见下面链接

转载自：https://www.jianshu.com/p/59d800532b2a


posted @ 2021-08-02 16:35  红苹果学园  阅读(200)  评论(0)  编辑  收藏  举报