标准答案
- 代码分割的目标是降低首屏包体积，把低频页面、重组件和第三方依赖延后加载。
- React.lazy 可以配合动态 import 加载组件，Suspense 用来展示加载期间的 fallback。
- 路由懒加载适合页面级拆包，组件懒加载适合图表、编辑器、地图、复杂弹窗等低频重组件。
- 拆包不是越碎越好，过度拆分会增加请求数量、加载瀑布和交互等待。
- 要结合 bundle 分析、首屏指标、缓存命中和用户路径决定拆分粒度。
题目解析
这道题可以按“为什么拆、拆哪里、怎么兜底”回答。
路由懒加载通常收益较稳定，因为不同页面天然是加载边界。组件级懒加载要看组件是否足够重、是否首屏必要。
Suspense 只负责等待期间的 UI，不会自动让代码更小。真正的拆分来自动态 import 和构建工具。
代码示例
下面是路由页面懒加载的典型写法。
TSX
const ReportPage = lazy(() => import('./pages/ReportPage'))
function AppRoutes() {
return (
<Suspense fallback={<PageLoading />}>
<Routes>
<Route path="/reports" element={<ReportPage />} />
</Routes>
</Suspense>
)
}常见误区
- 把所有组件都 lazy，导致用户操作时频繁等待小 chunk。
- 只做动态 import，没有设计加载态、错误态和重试入口。
- 没有用 bundle 分析验证拆分效果，凭感觉优化首屏包体积。