【Web前端Talk】React-loadable 进行代码分割的基本使用 (2)

【Web前端Talk】React-loadable 进行代码分割的基本使用

·webpack 选填,可以将组件变成“弱”依赖(不会将 module 引入到 bundle)中,当使用babel的时候自动执行。

 

【Web前端Talk】React-loadable 进行代码分割的基本使用

·modules 选填,由要导入模块的可选路径组成的数组。

 

【Web前端Talk】React-loadable 进行代码分割的基本使用

LoadableComponent:

这是通过Loadable或Loadable.map返回的组件。

【Web前端Talk】React-loadable 进行代码分割的基本使用

LoadableComponent.preload():

用于提前加载(预加载)LoadableComponent,下面假设有一个组件,点击按钮后展示,当鼠标划入按钮上的时候就开始预加载:

【Web前端Talk】React-loadable 进行代码分割的基本使用

LoadableComponent可以接收的props:

·error 加载失败,值为null时代表加载成功,使用案例:

 

【Web前端Talk】React-loadable 进行代码分割的基本使用

·retry 重新加载(重试),使用案例:

 

【Web前端Talk】React-loadable 进行代码分割的基本使用

·timeOut 布尔值,请求超时时传递给组件,使用案例:

 

【Web前端Talk】React-loadable 进行代码分割的基本使用

·postDelay 布尔值,到达时间延迟后返回给组件,使用案例:

 

【Web前端Talk】React-loadable 进行代码分割的基本使用

以上参数汇总使用案例:

【Web前端Talk】React-loadable 进行代码分割的基本使用

以上就是我为大家总结出的React Loadable的功能和用法。

总结一下React Loadable的原理是通过import()返回的promise对象实现了异步的操作。

即便如此,其实代码的拆分工作也不是那么简单,我们要确保选择拆分的位置能够均匀地分割代码包而不会影响用户体验,这也是一大难点。反观本文开头给出的对比图片可以得到些许启发,在基于路由拆分代码的基础上进行基于组件拆分是一个不错的起点。

最后大家可以在评论区探讨一些自己拆分代码的好的方案、心得或者疑惑,让我们一起探讨一下吧~

 

 

欢迎大家关注我们的公众号

Web前端Talk

【Web前端Talk】React-loadable 进行代码分割的基本使用

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzwzf.html