按需加载路由可以减去不必要运行，比如我们首次打开某个页面，我们只打开了一个路由，如果我们配置了按需加载，当前页面只会加载这个路由，如果没有配置的话，会发现我们进入到某个路由时，其他不相关的路由也已经加载，这样会大大增加项目运行速度，话不多说，直接看代码: 记得下载此模块 cnpm i react-loadable --save
定义路由懒加载工具 // 路由懒加载的工具类（我的项目懒加载类是放在utiles -> loadable.js下，utils也是自己配置的工具类文件夹） import React from 'react' import Loadable from 'react-loadable' import styles from '@styles/modules/loadable.module.scss' // 通用的过场组件 const loadingComponent =()=>{ return ( <div> loading... </div> ) } // 过场组件默认采用通用的，若传入了loading，则采用传入的过场组件 export default (loader, loading = loadingComponent)=>{ return Loadable({ loader, // 将我们需要的组件当做第一个参数传递进来即可 loading }) } 2.使用懒加载 import loadable from '@utils/loadable' // @pages/main/main 是我组件的路径 const mainPage = loadable(() => import('@pages/main/main')) export { mainPage }以上内容如果对你的项目有帮助，请给个赞谢谢！
