React.lazy 与 Suspense 可实现组件动态加载，减少初始包体积，提升首屏性能；通过 import() 动态引入组件，Suspense 包裹并设置 fallback 加载提示，结合 React Router 实现路由级代码拆分，配合 Error Boundary 处理加载失败，保障用户体验完整。
在现代前端开发中，提升应用加载性能的关键手段之一是代码拆分。React 提供了 React.lazy 与 Suspense 的组合方案，让开发者可以轻松实现组件级别的动态加载，从而减少初始包体积，加快首屏渲染速度。
React.lazy：动态导入组件
React.lazy 允许你像渲染普通组件一样动态加载一个使用动态 import() 加载的组件。它接收一个返回 Promise 的函数，该 Promise 需要 resolve 一个导出为 default 的 React 组件。
示例：
const LazyComponent = React.lazy(() => import('./LazyComponent'));
注意：目前 React.lazy 只支持默认导出（default exports）。
Suspense：处理加载状态
仅仅使用 React.lazy 是不够的，因为组件加载需要时间。Suspense 用于在组件异步加载时显示 fallback 内容，比如加载动画或占位符。
Suspense 包裹 lazy 组件，并通过 fallback 属性指定加载过程中的提示内容。
示例：
<Suspense fallback="<div>正在加载...</div>"> <LazyComponent /> </Suspense>
Suspense 可以包裹多个 lazy 组件，且支持嵌套使用，统一管理加载状态。
实际应用场景
常见于路由级别的代码拆分。结合 React Router 使用，可按需加载不同页面。
例如：
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));
function App() {
return (
<Router>
<Suspense fallback="<div>加载中...</div>">
<Routes>
<Route path="/" element=<Home /> />
<Route path="/about" element=<About /> />
</Routes>
</Suspense>
</Router>
);
}
这样，只有访问对应路由时，才会加载相应组件代码。
错误处理与边界控制
Suspense 本身不处理加载失败的情况（如网络错误）。你需要配合 Error Boundary（错误边界）来捕获和处理异常。
创建一个错误边界组件：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <div>加载失败，请刷新重试。</div>;
}
return this.props.children;
}
}
然后将它包裹在 Suspense 外层：
<ErrorBoundary>
<Suspense fallback="<div>加载中...</div>">
<LazyComponent />
</Suspense>
</ErrorBoundary>
基本上就这些。React.lazy 与 Suspense 的组合为代码拆分提供了简洁而强大的支持，合理使用能显著优化用户体验。不复杂但容易忽略的是加载状态和错误处理的完整性。
