使用 react-loadable 在 React 项目中实现 Code Splitting

2,374 阅读3分钟
原文链接: mp.weixin.qq.com

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 React Three - The Ghost You Gave to Me

Code Splitting 是一项在现代 Web 开发中被运用至越来越广泛的技术,它可以让每一模块的代码只有在真正需要的时候才去加载。举个例子,使用了基于路由的 code splitting,在用户真正要去到每一路由的模块时,这个模块对应的代码才会被加载。通过 code splitting,在应用初始化时,只有必要的最少部分的代码才会被加载,其余模块都需要“指令”触达。这样做的话,我们可以通过减少初始化代码包的体积,大大提升应用的性能。

React Loadable 是由 @jamiebuilds 开源的一个库,可以很容易的实现 React 中的 code-splitting,并且对 React 组件支持良好。它通过 dynamic imports 以及 webpack 在打包时会自动根据动态的 imports 将代码分割成不同的代码包。

让我们来快速过一遍 React Loadable 的使用方法。

安装  

React Loadable 可伴随 npm 或 yarn 直接食用:

用法 

为了了解最简单的语法,让我们先来撸一个简单又不失做作的例子。首先,搞一个 SomeComponent:

接下来,让我们在 App 组件中使用它:

我们注意到,引入的组件只有在用户点击按钮后才会真正的渲染出来。虽然对于现在这个 SomeComponent 来说,它足够简单,我们可以不去关心这样做的性能问题,但如果是一个较大的组件,那可以就不得了了,这时候 code-splitting 就能派上用用场了。

为了完成 code-splitting,让我们用 React Loadable 把现在的代码重构一下:

Loadable 是一个高阶组件,它接收一个对象作为参数,这个对象包含两个 key:loader 和 loading。

- loader:接收一个返回 promise 的方法,resolve 的值是一个 React Component。这里对 dynamic import 做了 polyfill,直接传入组件的地址就好了

- loading:接收一个 React Component,在目标组件尚未加载成功时,渲染这个传入的组件

就是这么简单!这会儿你可以看看控制台的 Network,只有在点击按钮后才会加载组件对应的代码。

加载延迟 

如果目标组件加载的太快了,loading 组件就会在页面上闪现一下,这样的视觉体验可不太好。幸运的是,Loadable 提供了一个简单的解决方案:将 pastDelay 字段通过属性传递给 loading 组件,当有指定的 delay 时间时,pastDelay 的值就会一直为 true:

默认的 delay 是200ms,你也可以自己传,比如上面,我就将 delay 设置成了 500ms。

加载错误处理 

另一个通过属性传递给 loading 组件的值是 error,有了它的存在,我们就可以在加载组件出错时依然顺滑的渲染出一些东西:

基于路由的 Code Splitting 

通常情况下,从代码层面划分一个 Web App 最简单的办法就是基于路由去搞。自从 React Router V4,在 React 中定义路由就像写组件一般丝滑,这时再用 React Loadable 去做路由层面的代码分割可以说是再简单不过了。

下面我们来看一个简单的例子,首先要做的就是让 react-router-dom 可以在我们的项目中正常的使用:

在接下来的例子中,我们会直接引入 Dashboard,它会在初始路由加载时就去拉对应的代码;同时我们借助 React Loadable 去加载 Settings 和 AddUser 组件,它们只有在预设的路由被激活时才会被加载:

至此,你已经掌握了一种在 React 项目中实现 code splitting 的方法了。如果看完还觉得有点晕的话,可以去 React Loadable 的 Github README 中学习一些更细节的东西 

参考文章:https://alligator.io/react/react-loadable/