React lazy+Suspense реализует ленивую загрузку маршрутов

документ

React lazy, официальная документация Suspense

После входа на страницу содержимое компонента будет 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блок кода для отображения отображаемого содержимого, когда соответствующий компонент запрашивается, а интерфейс пуст.