像素

使用lazy、Suspense实现路由懒加载

lazy：支持动态引入组件，接收一个 dynamic import 函数，函数返回的应为 promise 且需要默认导出需要渲染的组件。同时，React.lazy() 组件需要在 React.Suspense 组件下进行渲染， Suspense 又支持传入 fallback 属性，作为动态加载模块完成前组件渲染的内容。

原理： lazy 函数返回了一个 Object 结构，React 将其定义为一种特殊的虚拟 DOM 结构 —— LazyComponent。 LazyComponent 加载原则：

  • 加载完成后直接返回组件模块本身
  • 加载失败抛出错误
  • 首次加载或加载中的组件将 promise 对象以 throw Error 的方式抛出 而 Suspense 主要就用于处理抛出的 promise，先渲染 fallback，当 promise resolve 之后加载返回的组建模块。

示例：

import React, { Suspense, lazy } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
const Home = lazy(() => import("./pages/home"));
const PageA = lazy(
  () => import(/* webpackChunkName: "pageA" */ "./pages/testBack/pageA")
);
const PageB = lazy(
  () => import(/* webpackChunkName: "pageB" */ "./pages/testBack/pageB")
);
const PageC = lazy(
  () => import(/* webpackChunkName: "pageC" */ "./pages/testBack/pageC")
);

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<Loading />}>
        <Routes>
          <Route path={"/"} element={<Home />} />
          <Route path={"/luckdraw"} element={<LuckDraw />} />
          <Route path={"/PageA"} element={<PageA />} />
          <Route path={"/PageB"} element={<PageB />} />
          <Route path={"/PageC"} element={<PageC />} />
          <Route path={"*"} element={<Error />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

可以结合 webpack 提供的 Magic Comments 对动态加载模块进行 chunk 命名.

← 返回