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

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 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/