React利用lazy+Suspense实现路由懒加载

import { lazy, LazyExoticComponent } from 'react'
export interface RouteType {
  path: string
  component: LazyExoticComponent<any>
  title?: string
  exact?: boolean
}
const routes: RouteType[] = [
  {
    path: '/',
    component: lazy(() => import('@/views/home/HomePage'))
  },
  {
    path: '/demo/index',
    component: lazy(() => import('@/views/demo/DemoIndex'))
  },
  {
    path: '/demo/popup',
    component: lazy(() => import('@/views/demo/DemoPopup'))
  }
]
export default routes

import React, { Suspense } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'
import RouteLoading from './RouteLoading'
import routes, { RouteType } from '../routes'
import { BASE_PATH } from '@/globalConstants'
const history: History = createBrowserHistory()
const AppRouter = () => { 
  const AppRoutes = routes.map((route: RouteType) => 
    <Route exact={route.exact === false ? false : true} path={`${BASE_PATH}${route.path}`} render={(props: any) => <route.component {...props} />} key={route.path} />
  )
  return (
    <Router history={history}>
      <Suspense fallback={<RouteLoading />}>
        <Switch>{AppRoutes}</Switch>
      </Suspense>
    </Router>
  )
}
export default AppRouter

import React from 'react'
import { UuiLoading } from 'uui-web-react'
export default function() {
  return <UuiLoading />
}

export { default as AppRouter } from './components/AppRouter'
export { default as routes } from './routes'

// 独立运行的路由要与配置文件保持一致
export const PUBLIC_PATH = '/uui-utils'
export const BASE_PATH = PUBLIC_PATH

import React from 'react'
import { AppRouter } from './router'
const App = () => {
  return <AppRouter />
}
export default App

() => { return import('../../pages/Home/index')};

const Home = lazy(() => import('../../pages/Home/index'))