精选文章 webpack Prefetching/Preloading

webpack Prefetching/Preloading

作者:冰魂破 时间: 2020-08-05 09:52:47
冰魂破 2020-08-05 09:52:47

1:是什么

preloading:设置这个指令,就会在当前的页面中,以较高优先级预加载某个资源。其实就相当于浏览器的预加载,但是浏览器的预加载只会加载html中声明的资源,但是preloading突破了这个限制,连css和js资源也可以预加载一波。

Prefetching:设置这个指令,就表示允许浏览器在后台(空闲时)获取将来可能用得到的资源,并且将他们存储在浏览器的缓存中。
这两种其实都是webpack提供的资源加载优化的方式,反正如果就是设置了这几个指令,就会先走个http的缓存,然后下次再次请求的时候直接从缓存里面拿,这样就节省了加载的时间。

 

设置Prefetching  

使用魔法注释的方式,在需要预加载的地方添加:

document.body.addEventListener("click", () => {
+ import(/* webpackPrefetch: true */ "./footer.js").then(module => {
    console.log(module);
    module.createFooter();
  });
});

设置Preloading

document.body.addEventListener("click", () => {
+ import(/* webpackPreload: true */ "./footer.js").then(module => {
    console.log(module);
    module.createFooter();
  });
});

 

 

Preloading什么时候用呢?比如说,你页面中的很多组件都用到了jQuery,比较强依赖这个东西,那么我们就可以当import引入jQuery库的时候设置为Preloading,让他预加载一波。

Prefetching我们一般用的比较多,也比较好理解,用官网的例子来说:一般当我们进入一个网站首页,只有当点击登录按钮的时候模态框才需要弹出来,那么我们就可以对这个login模态框组件做下Prefetching,当首页加载完毕,浏览器空闲的时候提前加载一下,这样当用户点击登录按钮就可以直接从缓存里面加载这个组件了。
 

 

相关文章

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:存储直通、PCI直通和SR-IOV

下一篇:1095:数1的个数

您可能感兴趣

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。