文档
进入页面后,组件的内容会通过 http
请求到对应的组件文件,当路由中有较多的页面时,会出现一个问题,那就是一次性将所有的组件都加载了,浪费性能,所以可以通过懒加载的形式来处理。
src/router/routes.ts
,使用 react
的 lazy
进行按需引入:
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
react
的 lazy
按需引入必须搭配 Suspense
才能实现懒加载过程,在 src/router/components/AppRouter.tsx
中引入创建的路由表:
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
src/router/components/RouteLoading.js
:
import React from 'react'
import { UuiLoading } from 'uui-web-react'
export default function() {
return <UuiLoading />
}
Suspense
的 fallback
属性可以是一个组件,该组件的引入不需要使用 lazy()
,直接引入即可。
src/router/index.tsx
:
export { default as AppRouter } from './components/AppRouter'
export { default as routes } from './routes'
其中,引用到了 globalConstants.ts
中定义的路由常量 BASE_PATH
,src/globalConstants.ts
:
// 独立运行的路由要与配置文件保持一致
export const PUBLIC_PATH = '/uui-utils'
export const BASE_PATH = PUBLIC_PATH
App.tsx
:
import React from 'react'
import { AppRouter } from './router'
const App = () => {
return <AppRouter />
}
export default App
总结:
Lazy
和 Suspense
都是 react
暴露的 api
,在使用时需要注意:
Lazy
是个高阶函数,接收一个函数形参,最终返回一个组件, 形参中函数固定格式:
() => { return import('../../pages/Home/index')};
可以简写为:
const Home = lazy(() => import('../../pages/Home/index'))
使用 lazy
进行路由懒加载后,每次点击 Link
后,再去请求相关的组件,那这个请求是会耗时间的。在网速比较慢的情况下,会出现路由视图白屏的情况,所以使用 Suspense
标签包裹注册的路由来进行白屏时的页面展示。
Suspense
标签接收一个属性 fallback
,fallback
指定一个组件或者 jsx
代码块,来展示当请求对应组件,界面白屏时所展示的内容。