react按需加载路由react-loadable

按需加载路由可以减去不必要运行，比如我们首次打开某个页面，我们只打开了一个路由，如果我们配置了按需加载，当前页面只会加载这个路由，如果没有配置的话，会发现我们进入到某个路由时，其他不相关的路由也已经加载，这样会大大增加项目运行速度，话不多说，直接看代码:
记得下载此模块 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
}

以上内容如果对你的项目有帮助，请给个赞谢谢！