react 中的 suspense 和 lazy 与 动态路由加

为了优化用户第一次打开首页的速度，很多人都会选择webpack按路由分包js文件，每个路由对应的component懒加载，也就是说只有当用户访问到该路由时，才会加载该模块，这样有效的避免了用户首次进入首页时一次下载所有资源的等待时长。
这里我们使用的是react里面的suspense和lazy。
页面比较多，使用了动态路由加载的方式
话不多说，上代码
(不需要太多自定义功能的话可以直接用 react-router-config(https://github.com/cherijs/react-router-config
)，路由渲染这部分就不用自己另外再写了)

renderRoutesMap.js

import React, {lazy,Suspense} from 'React';
import {Route} from 'react-router-dom';

const RenderRoutesMap = (routes) => (
  const LazyComponent = lazy(route.component);
  routes.map((route,index) => {
    return(
      <Route key={index} exact = {route.exact} path={route.path} render={props =>(
        <Suspense>
          <LazyComponent  {...props}/>
        </Suspense>
      )}/>
    )
  })
)

export default RenderRoutesMap

renderRoutes.js

import RenderRoutesMap from './renderRoutesMap'
import  {ConnectedRouter} from 'connected-react-router';
import {PropType} from 'prop-types'

RenderRoutes.propTypes = {
  routes: PropTypes.array.isRequired,
  extraProps: PropTypes.object.isRequired,
  switchProps: PropTypes.object.isRequired,
} 

const RenderRoutes = ({routes, extraProps = {}, switchProps = {} }) => (
  <ConnectedRouter {...extraProps}>
    <Switch {...switchProps}>
      {RenderRoutesMap(routes)}
    </Switch>
  </ConnectedRouter>
)

export default RenderRoutes

routes.js

import RenderRoutes from './renderRoutes'

const router = (routerConfig, routerProps) => (
  renderRoutes({
    routes; routerConfig,
    extraProps:routerProps
  })
)
export default Routes

使用
index.js

import Routes from './routes'
import Home from './home'
import Test from './test'

const routers = [
  {
    path: '/home',
    exact: true,
    component: Home
  },
{
    path: '/test',
    exact: true,
    component: Test
  }
]

return(
  <Routes />
)