React中Suspense的分包实践

路光.2025-10-30 16:33

首先预备目录

TypeScript 复制代码

//Footer.tsx
export const Footer = () => {
  return (
    <div>
      Footer
    </div>
  );
};

TypeScript 复制代码

// Header.tsx
export const Header = () => {
  return (
    <div>
      <h1>Header</h1>
    </div>
  );
};

TypeScript 复制代码

 // index.tsx
import { Header } from "./Header";
import { Footer } from "./Footer";
 
//因为react的更新渲染DOM是自顶向下的，若遇到异步资源，则不知道如何做，就需要用Suspense来包裹
// 包裹之后它内部的机制就会发生变化了，它内部的异步操作可以暂停，暂停等到未来内部的内容得到了结果
// 返回成功后，Suspense才会渲染包裹的组件，否则会一直渲染loading，
 

//为了做一些异步读取的事情
// sspense的1.0版本
export const SuspenseDemo = () => {
  return <div> 
     <Header /> 
     <Footer /> 
     </div>;
};

执行pnpm build打包可以看到，项目中所有tsx文件只打包到一个js中

使用Suspense，包裹异步加载的组件打包后

TypeScript 复制代码

//index.tsx

import  { lazy,Suspense } from "react"; 
// 引入可以变为动态引入
const Header = lazy(()=>
  import("./Header").then((module) => ({
    default: module.Header
  }))

);
const Footer = lazy(()=>
  import("./Footer").then((module) => ({
    default: module.Footer
  }))

);
//因为react的自顶向下的，若遇到异步资源，则不知道如何做，就需要用Suspense来包裹
// 包裹之后它内部的机制就会发生变化了，它内部的异步操作可以暂停，暂停等到未来内部的内容得到了结果
// 返回成功后，Suspense才会渲染包裹的组件，否则会一直渲染loading，

 

//为了做一些异步读取的事情
// sspense的1.0版本
export const SuspenseDemo = () => {
  return <div>
    <Suspense fallback={<div>loading...</div>}>
     <Header /> 
     <Footer />
     </Suspense>
     </div>;
};

可以看到多出了Footer和Header的js文件，因此Suspense可以起到打包优化分包的作用

TypeScript 复制代码

// App.tsx
import './App.css'
import {SuspenseDemo} from './components/3.SuspenseDemo/index.tsx'
function App() {

  return (
    <div> 
      <SuspenseDemo/>
    </div>
  )
}

export default App