React懒加载进阶

title: React懒加载进阶 id: 32c3807c2fb1bce5a126b9e0b8c4b88f tags: [] date: 2000/01/01 00:00:00 updated: 2024/05/07 14:44:14 isPublic: true --#|[分隔]|#--

React懒加载进阶

项目使用 Vite 进行的初始化。

版本说明:

• vite: ^5.2.0

• react: ^18.2.0

• react-router-dom: ^6.23.0

前端使用react、vue进行spa单页面开发时，由于普通单页面项目的特性，网站会在初次加载时，把网站所有需要用的的页面资源全部加载完成后，才能展示页面，这就导致网站初次打开时的白屏时间过长（大一些的网站可能三五秒），影响用户体验。

React和vue都有提供页面懒加载、组件懒加载的功能，这里记录一下React的路由懒加载功能。

全局基础-main.tsx

我的项目的main.tsx是初始入口，路由配置写在App.tsx中。

下面是main.tsx的代码，后续的记录中，main.tsx中的内容不会发生变化：

import ReactDOM from 'react-dom/client'
import '@/assets/css/index.css'
import App from '@/App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <App />
)

下面会修改App.tsx，来分别实现不同功能的路由。

常规的基本路由写法

下面是最基本、最常规，没有实现路由懒加载的写法。

效果：首次加载网站会加载所有页面资源，项目大或网速差时，会导致白屏时间过长，优点就是再切换页面时，能立刻切换过去。

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Home from '@/pages/Home'
import IconList from '@/pages/Other/IconList'

function App() {
  return (
    <div className='min-h-screen'>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/other/iconList" element={<IconList />} />
          <Route path="/*" element={<Navigate to="/" />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

常规实现路由懒加载的写法-Suspense

下面是React官方推荐的路由懒加载的写法。

效果：如果打开的页面没有打开过，会先展示Suspense标签中传入的fallback字段的组件样式，直到对应页面的页面资源加载完成；如果要进入的页面，是刚刚打开过且没有刷新过网站的，那就不需要再次加载，可以立刻切换进入。

优点是实现了懒加载，缺点就是，新页面资源加载完成之前，会展示fallback传入的组件，如果不传，那就会是彻底的空白页面，个人不喜欢这种，比如切换内容时，页面展示一个全局的大loading，半秒后才切换到新页面，觉着操作有种断裂感。

Suspense可以用来比较好的支持懒加载组件

import React, { Suspense } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
const Home = React.lazy(() => import('@/pages/Home'))
const IconList = React.lazy(() => import('@/pages/Other/IconList'))

function App() {
  return (
    <div className='min-h-screen'>
      <Suspense fallback={<div>加载中...</div>}>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/other/iconList" element={<IconList />} />
            <Route path="/*" element={<Navigate to="/" />}></Route>
          </Routes>
        </BrowserRouter>
      </Suspense>
    </div>
  )
}

export default App

路由的Data Apis实现懒加载

都知道react项目用来管理路由的是：React Router，它具体对应的库是主要是 react-router-dom，上面的两个章节也是使用的这个库。

这个章节会使用 react-router-dom 提供的功能来实现路由懒加载，优点就是能在页面切换时，效果和普通静态网站一样——点击后页面先卡着，静默去加载新页面的资源，加载完成后立刻展示。

下面是使用 react-router-dom 的功能实现的路由懒加载效果。

写法会比较怪，可以说是类似vue的路由配置的写法，这是为了使用 react-router-dom 的 Data Apis 的 lazy 方法，只有它支持路由懒加载。

不过它支持懒加载路由，无法用来懒加载组件。

不过为了体量开发者的原先那种标签式的写法习惯，Data Apis也可以支持原先的写法，下一个章节我会提供一下写法。

import { Navigate, createBrowserRouter, RouterProvider } from "react-router-dom";

function App() {
  // Data Apis
  let router = createBrowserRouter([
    {
      path: "/",
      lazy:  async () => ({
        Component: (await import('@/pages/Home')).default,
      }),
    },
    {
      path: "/other/iconList",
      lazy: async () => ({
        Component: (await import('@/pages/Other/IconList')).default,
      }),
    },
    {
      // 缺省路由重定向
      path: "/*",
      element: <Navigate to ="/" />,
    },
  ])

  return (
    <div className="min-h-screen">
      <RouterProvider router={router} />
    </div>
  )
}

export default App

旧习惯写法的Data Apis

下面的主要是旧习惯的写法，但可以支持使用 react-router-dom 的 createRoutesFromElements 方法转为 Data Apis。

import { Navigate, createBrowserRouter, Route, RouterProvider, createRoutesFromElements } from "react-router-dom";

function App() {
  // Data Apis
  let router = createBrowserRouter(createRoutesFromElements(
    <Route>
      <Route path="/" lazy={async () => ({Component: (await import('@/pages/Home')).default})}></Route>
      <Route path="/other/iconList" lazy={async () => ({Component: (await import('@/pages/Other/IconList')).default})}></Route>
      <Route path="/*" element={<Navigate to ="/" />}></Route>
    </Route>
  ))

  return (
    <div className="min-h-screen">
      <RouterProvider router={router} />
    </div>
  )
}

export default App

总结

React的Suspense，可以用来懒加载路由和组件，缺点就是，加载新页面、组件期间，原位置要么空白，要么提供一个占位组件，对此不喜欢的，可以使用另一种方案。

React Router的 Data Apis 的 lazy 方法，可以再新页面资源加载起源，仍旧展示旧页面，但只支持路由懒加载。

个人认为，页面懒加载使用后者，组件懒加载可以使用前者。