react-loadable
npm：https://www.npmjs.com/package/react-loadable
github：https://github.com/jamiebuilds/react-loadable
简介
react-loadable是一个在react应用是使用非常简单的轻量级的代码分割组件库。
loadable是一个可以使你在组件渲染之前动态加载任何模块的高阶组件。（一个可以创建组件的方法）
手册
假想你已经实现了一个react应用，并且正在使用webpack进行构建，一切进行的都是那么顺利。但是突然有一天你发现你应用中的模块正在变大，这使你的应用运行变得越来越慢。这时候你就需要对你的代码进行代码拆分了！
代码分割就是将包含整个应用的一个大模块，分割成包含应用各个独立部分的许多小模块。实现这个看起来很难，但是像webpack这样的工具内置了这样的功能，而React Loadable是为了使其更简单实现而诞生的。
基于路由拆分 VS 基于组件拆分
你经常能听到别人建议你将程序按照不同路由进行拆分，然后通过异步的方式加载。这对于很多用户来说这样已经干的很不错了，因为点击一条链接，然后等待页面加载，并浏览这对很多上网用户来说是很平常的操作，可以很欣然的接受。
但是其实我们可以做的更好的。
现在使用的大部分react路由工具都是一个简单的组件，没有什么与众不同的地方。所以如果我们使用基于组件分割的方式进行优化的话，我们又能得到什么呢？
很多事实证明，有很多地方根据组件进行程序拆分要比根据路由进行拆分简单的多。例如Modals,tabs等许多会隐藏内容的UI组件，它们会在用户进行某些操作的时候才会被加载。
例如：你的应用程序有一个选项卡组件，用户很有可能根本就不会点进其他的选项页面，那我们又为什么要在父路由上将选项卡的所有页面组价加载出来的？
很多地方，你可以等优先级高的组件加载完成后再加载其他的组件。也就是说，那个位于页面底部并且内部加载了很多库的组件，普遍认为没有必要和位于页面顶部的展示组件同时加载。
由于路由其实就是组件，所以我们还是可以很轻松在路由层面分割代码。
在你的应用中使用新的代码分割功能是很简单的，以至于你根本不用反复思考。你只需要改动少量的代码因为一切都应该是自动化完成的。
推荐插件
（1）react-loadable-visibility
建立在与相同的API之上并保持相同的API react-loadable，该库使您可以仅加载屏幕上可见的内容。
（2）@loadable/component
一个React代码拆分库，不能替代React.lazy，react团队推荐使用
参考资料
https://www.jianshu.com/p/462bb9d1c982
https://www.jianshu.com/p/186a9605e93e
@loadable/component
主页文档：https://loadable-components.com/
npm：https://www.npmjs.com/package/@loadable/component
github：https://github.com/gregberge/loadable-components
简介
- 一个React代码拆分库
- 不能替代React.lazy
- React团队推荐的解决方案
推荐插件
react-loadable（代码分割）
react-loadable-visibility（仅加载可见内容）
若有收获，就点个赞吧
0 人点赞
