react路由组件按需加载，懒加载成功案例

一： 环境说明：
1、create-react-app创建的项目

二：场景说明：
1、我的项目是一个有着几十个页面的落地页，模板有十几个
2、如果不使用react路由组件按需加载，main.js主程序文件会比较大，导致首页加载时间略长

三：打包效果对比图：

四：实现，借助react-loadable插件
1、安装：npm i react-lazyload
2、用法参考：https://www.npmjs.com/package/react-loadable
3、react路由组件按需加载，实战案例参考：
首先，创建loadable.js

然后，使用loadable()动态加载组件，并将const定义的变量赋值给 Route 的 component

最后打包即可实现react路由组件懒加载或者按需加载

2021-9-23更新

1、由于react-lazyload很久没有更新了 在使用过程中会有过时的生命周期的warning提示，所以这个不是最优的解决方案
2、通过阅读react官方文档（https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy）发现，官方已经给出了推荐方案，在“代码分割”中有具体的说明。
方案一：官方解决方案 React.lazy
方案二：官方推荐第三方解决方案 Loadable Components 

区别：
1、React.lazy 和 Suspense 技术还不支持服务端渲染
2、使用上，Loadable Components更加方便

以上是针对react路由组件按需加载的补充内容，欢迎讨论~