React 中如何实现代码分割和懒加载？

1. React.lazy 和 Suspense 的基础用法

React.lazy() 接受一个动态 import() 函数作为参数，返回一个可延迟加载的 React 组件。Suspense 组件包裹懒加载组件，并指定加载过程中的降级 UI（如加载指示器）。当组件首次渲染时，React 自动发起 JS 包的下载，下载完成后再渲染组件。

2. 基于路由的代码分割

将每个页面拆分为独立的 JS 包是代码分割中收益最高的手段。配合 React Router 使用时，每个路由对应的页面组件都应通过 React.lazy() 加载，这样用户访问不同页面时只下载当前页面所需的代码，可大幅减少初始包体积。

3. 组件级和条件懒加载

对于不是首屏必需的重型组件（如图表编辑器、富文本编辑器、模态框），应根据交互条件动态加载。例如：用户点击"编辑"按钮时才加载编辑器组件，避免所有访问者都提前下载编辑器的代码。

4. 第三方库的按需加载

大型第三方库（如 Chart.js、Monaco Editor、PDF 处理库）应通过动态 import() 按需加载，而非在应用入口处全部导入。配合 React.lazy 或直接在事件处理函数中动态导入，可显著减少初始包体积。

5. 打包分析和优化验证

使用 webpack-bundle-analyzer 或 Vite 的打包可视化工具分析最终生成的 JS 包组成，识别体积过大的模块和重复依赖。结合 Chrome DevTools 的 Coverage 面板（覆盖率分析）找出加载了但未实际执行的代码，针对性地进行懒加载处理。