一: 环境说明:
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路由组件按需加载的补充内容,欢迎讨论~

微信交流(备注:前端)