React 中的路由懒加载是什么？其实现原理是什么？

回答思路

1. 【回答框架 1】路由懒加载是指将路由对应的组件代码拆分为独立 chunk，仅在用户导航到该路由时才动态加载并渲染，从而减少首屏加载体积、提升初始加载速度。核心是结合 React.lazy 与 Suspense 实现组件的按需加载。
2. 【回答框架 2】原理基于动态 import() 语法，webpack 等打包工具在构建时会将动态 import 的模块单独打包成 chunk，并在运行时通过 JSONP 或类似机制发起网络请求获取该 chunk，加载完成后执行模块代码并返回组件。React.lazy 接收一个返回 Promise 的加载函数，Promise 解析后得到组件。
3. 【回答框架 3】Suspense 用于处理加载状态，在 lazy 组件尚未加载完成时，Suspense 可以显示 fallback 内容（如 loading 提示）。当 Promise resolve 后，React 会重新渲染并显示真实组件。若加载失败，可通过错误边界捕获错误。
4. 【回答框架 4】实现上，路由配置中通常将 component 字段替换为 React.lazy(() => import('./Component'))，并在路由组件的上层用 <Suspense fallback={...}> 包裹。需要注意 lazy 组件必须由 Suspense 包裹，否则会报错。
5. 【回答框架 5】懒加载的权衡是增加路由切换时的等待时间，但对首屏性能优化明显。同时需要合理划分 chunk 粒度，避免过细导致请求过多，过粗则降低优化效果。
6. 【关键点 1】路由懒加载通过 React.lazy 和 Suspense 实现组件按需加载。
7. 【关键点 2】核心原理是动态 import() 使打包工具将模块拆分为独立 chunk，运行时按需请求。
8. 【关键点 3】Suspense 提供加载状态展示，错误需用错误边界处理。
9. 【关键点 4】懒加载能减少首屏体积，但增加切换延迟，需要权衡 chunk 划分。
10. 【易错点 1】lazy 组件必须被 Suspense 包裹，否则 React 会报错。
11. 【易错点 2】懒加载不保证加载成功，需要处理网络错误或 chunk 加载失败的情况。
12. 【易错点 3】不要将懒加载用于所有组件，否则可能导致请求过多，影响性能。