vue页面按需加载的prefetch和preload

1,108 阅读1分钟

1 在vue里我们对于路由页面会按需加载引用,从而拆分打包js文件

export default new Router({
  routes: [
    {
      path: '/',
      name: 'entry',
      component: () => import('./views/entry')
    }
    ]
    

然后打包完js文件

image.png

在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 告诉浏览器这个资源将来可能需要,但是什么时间加载这个资源是由浏览器来决定的

参考文档

blog.fundebug.com/2019/04/11/…

html.spec.whatwg.org/multipage/l…