1 在vue里我们对于路由页面会按需加载引用,从而拆分打包js文件
export default new Router({
routes: [
{
path: '/',
name: 'entry',
component: () => import('./views/entry')
}
]
然后打包完js文件
在html文件中引入如下
<link as="script" href="//test.a.com/www/test/js/pc.ef141476933d61b48c3c.js" rel="preload">
<link href="//test.a.com/www/test/js/0.ef141476933d61b48c3c.js" rel="prefetch">
<link href="//test.a.com/www/test/js/1.ef141476933d61b48c3c.js" rel="prefetch">
<link href="//test.a.com/www/test/js/10.ef141476933d61b48c3c.js" rel="prefetch">
<link href="//test.a.com/www/test/js/11.ef141476933d61b48c3c.js" rel="prefetch">
2 可以看到:
对于(主文件pc.ef141476933d61b48c3c.js,是通过rel= preload加载
对于(拆分的页面文件0.ef141476933d61b48c3c.js")是通过rel=prefetch加载
3 那我们知道页面文件优先级低于主文件,所以preload肯定是优先级高于prefetch。
preload 加载资源一般是当前页面需要的,prefetch 一般是其它页面有可能用到的资源
3.1 、preload 是告诉浏览器预先请求当前页面需要的资源(关键的脚本,字体,主要图片等)。
3.2 、prefetch 应用场景稍微又些不同 —— 用户将来可能跳转到其它页面需要使用到的资源。如果 A 页面发起一个 B 页面的 prefetch 请求,这个资源获取过程和导航请求可能是同步进行的,而如果我们用 preload 的话,页面 A 离开时它会立即停止。
Prefetch 告诉浏览器这个资源将来可能需要,但是什么时间加载这个资源是由浏览器来决定的
参考文档