React.lazy 是 React 16.6+ 提供的动态导入 API，需配合 Suspense 使用，支持按需加载组件、路由级懒加载、错误边界捕获及 Webpack chunk 优化。
React.lazy 是 React 16.6+ 提供的 API，用于动态导入组件并实现按需加载（懒加载），必须配合 Suspense 使用。它的核心是包装一个返回 Promise 的 dynamic import() 表达式。
基本用法：用 lazy 包裹 import()
把原本静态导入的组件，改为使用 import() 动态导入，并传给 React.lazy：
const LazyComponent = React.lazy(() => import('./LazyComponent'));
注意：import() 必须是函数调用形式，不能写成变量或表达式提前求值（比如 const mod = import(...); lazy(() => mod) 是错的）。
必须搭配 Suspense 渲染异步组件
React.lazy 返回的是一个“懒组件”，它本身不处理加载状态。你需要用 <Suspense fallback="..."> 包裹它，来指定加载中显示的内容：
function App() {
return (
<Suspense fallback=<p>加载中...</p>>
<LazyComponent />
</Suspense>
);
}
fallback 可以是任意 React 节点，比如骨架屏、Spinner 或文字提示。Suspense 还支持嵌套，可为不同区域设置不同 loading 状态。
配合路由实现页面级懒加载（如 React Router）
在路由场景中，常把每个路由组件都设为懒加载：
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));
<p>function App() {
return (
<Router>
<Suspense fallback=<div>页面加载中</div>>
<Routes>
<Route path="/" element=<Home /> />
<Route path="/about" element=<About /> />
</Routes>
</Suspense>
</Router>
);
}
⚠️ 注意：不要在 element 中直接写 {<Home />}，要确保 <Suspense> 包住整个 <Routes> 或至少包住懒组件的渲染位置。
进阶技巧：错误边界 + 加载状态优化
懒加载可能失败（如网络中断、模块不存在），建议加上 ErrorBoundary 捕获异常：
- 用自定义错误边界包裹
<Suspense>，处理import()抛出的错误 - 避免重复加载失败：可在
lazy外加一层缓存逻辑（但通常 Webpack 已做模块缓存） - Webpack 会自动为
import()创建独立 chunk，可通过webpackChunkName注释控制文件名：React.lazy(() => import(/* webpackChunkName: "home" */ './pages/Home'))
这样生成的 chunk 文件更易识别，也方便做预加载或 CDN 分发。
