React中Suspense的分包实践

首先预备目录

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

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

 // 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，包裹异步加载的组件打包后

//index.tsximport  { 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可以起到打包优化分包的作用

// App.tsx
import './App.css'
import {SuspenseDemo} from './components/3.SuspenseDemo/index.tsx'
function App() {return (<div> <SuspenseDemo/></div>)
}export default App