React lazy+Suspense implements lazy loading of routes

document

React lazy, Suspense official documentation

After entering the page, the content of the component will be httprequested to the corresponding component file. When there are many pages in the route, there will be a problem, that is, all the components are loaded at once, which wastes performance, so you can use lazy Loaded form to process.

src/router/routes.ts, use the on-demand import reactof 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

reactThe lazyon-demand import must be matched Suspenseto realize the lazy loading process, and src/router/components/AppRouter.tsximport the created routing table in :

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 />
}

SuspenseThe fallbackattribute can be a component, and the introduction of this component does not need to be used lazy(), it can be imported directly.

src/router/index.tsx：

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

globalConstants.tsAmong them, the routing constant defined in is referenced 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

Summarize:

Lazyand Suspenseare reactexposed api, you need to pay attention when using:

LazyIt is a higher-order function that receives a function parameter and finally returns a component. The function in the parameter has a fixed format:

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

Can be abbreviated as:

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

After using lazyto perform lazy loading of routes, each time you click Linkto request related components, this request will take time. When the network speed is relatively slow, there will be a white screen in the routing view, so use Suspensethe route registered with the label to display the page when the white screen is displayed.

SuspenseThe tag receives an attribute fallback, fallbackspecifying a component or jsxcode block to display the content displayed when the corresponding component is requested and the interface is blank.