快捷導(dǎo)航

React利用lazy+Suspense實(shí)現(xiàn)路由懶加載

更新時(shí)間：2023年06月30日 11:08:28 作者：＊且聽風(fēng)吟

這篇文章主要為大家詳細(xì)介紹了React如何利用lazy+Suspense實(shí)現(xiàn)路由懶加載，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下

文檔

進(jìn)入頁(yè)面后，組件的內(nèi)容會(huì)通過 http 請(qǐng)求到對(duì)應(yīng)的組件文件，當(dāng)路由中有較多的頁(yè)面時(shí)，會(huì)出現(xiàn)一個(gè)問題，那就是一次性將所有的組件都加載了，浪費(fèi)性能，所以可以通過懶加載的形式來處理。

src/router/routes.ts，使用 react 的 lazy 進(jìn)行按需引入：

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 才能實(shí)現(xiàn)懶加載過程，在 src/router/components/AppRouter.tsx 中引入創(chuàng)建的路由表：

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 屬性可以是一個(gè)組件，該組件的引入不需要使用 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：

// 獨(dú)立運(yùn)行的路由要與配置文件保持一致
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

總結(jié)：

Lazy 和 Suspense 都是 react 暴露的 api，在使用時(shí)需要注意：

Lazy 是個(gè)高階函數(shù)，接收一個(gè)函數(shù)形參，最終返回一個(gè)組件，形參中函數(shù)固定格式：

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

可以簡(jiǎn)寫為：

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

使用 lazy 進(jìn)行路由懶加載后，每次點(diǎn)擊 Link 后，再去請(qǐng)求相關(guān)的組件，那這個(gè)請(qǐng)求是會(huì)耗時(shí)間的。在網(wǎng)速比較慢的情況下，會(huì)出現(xiàn)路由視圖白屏的情況，所以使用 Suspense 標(biāo)簽包裹注冊(cè)的路由來進(jìn)行白屏?xí)r的頁(yè)面展示。

Suspense 標(biāo)簽接收一個(gè)屬性 fallback，fallback 指定一個(gè)組件或者 jsx 代碼塊，來展示當(dāng)請(qǐng)求對(duì)應(yīng)組件，界面白屏?xí)r所展示的內(nèi)容。

到此這篇關(guān)于React利用lazy+Suspense實(shí)現(xiàn)路由懶加載的文章就介紹到這了,更多相關(guān)React路由懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: