多路由单页应用按路由懒加载组件以减小首屏包体积

当 SPA 有多个路由且各路由功能不同、不需要首屏加载全部路由代码时，使用按路由代码分割。

适用场景

解决思路

1. 将 React Suspense 或 loadable-components 与 react-router 等路由库结合，根据当前路由动态加载组件。
2. 对每个路由的页面级组件进行懒加载，以获得按路由代码分割的最佳效果。
3. 利用路由切换或重定向时用户预期的自然加载停顿来懒加载组件，使体验更平滑。
4. 如果使用 Next.js、Remix、React Router 等现代框架，直接使用其开箱即用的按路由代码分割能力。
5. 如果是自定义搭建，使用 React.lazy() 配合 Suspense 包裹路由级组件，或为每个路由配置打包器的入口点。

适用边界 · 注意事项

• 单页应用只有一个路由，或所有路由都需要同一套代码/同一功能集时。
• 无法接受路由切换时出现加载状态，或必须首屏一次性加载全部功能代码时。
• 现代框架已内置满足需求的路由级拆分时，不必再手动重复配置。