请解释在 React 应用中，利用 React Router 实现路由级别代码分割与按需加载模块的具体做法，并说明其背后的原理。
考察说明
考查对 React 路由懒加载实现机制（React.lazy + Suspense）以及适用场景的理解。
回答思路
- 【回答框架 1】React 16.6 起提供了 React.lazy 和 Suspense，React.lazy 接收一个动态 import() 函数，返回一个可渲染的组件，在组件首次渲染时才加载对应模块。
- 【回答框架 2】结合 React Router，可将路由配置中的 component 属性替换为 React.lazy 包装的组件，并在外层包裹 Suspense，fallback 属性可以指定加载中的占位 UI。
- 【回答框架 3】动态 import() 是 Webpack 等构建工具支持的代码分割点，构建时会生成独立的 chunk 文件，浏览器在需要时按需请求，从而减小初始包体积。
- 【回答框架 4】还可以考虑使用 Loadable Components 这类更成熟的库，它支持服务端渲染和更细粒度的加载状态控制，但 React.lazy 是目前官方推荐的基础方案。
- 【关键点 1】React.lazy 必须配合 Suspense 使用，否则会抛出异常。
- 【关键点 2】动态 import() 返回 Promise，Webpack 会基于此生成代码分割点。
- 【关键点 3】懒加载模块仅在路由首次匹配时触发加载，之后会缓存。
- 【关键点 4】fallback 通常使用 loading 组件，避免白屏时间过长。
- 【易错点 1】React.lazy 目前不支持命名导出，只能默认导出组件。
- 【易错点 2】如果多个路由懒加载同一模块，可能重复请求，需配置合理的 splitChunks。
- 【易错点 3】过度拆分会导致大量小请求，应权衡 bundle 大小与请求数量。