关于 route-based
面向 React 开发者的路由拆分指南，介绍按当前路由延迟加载页面组件，避免每个页面都请求不需要的代码。内容涵盖常用实现方式及其对初始加载的帮助。
主要功能
- 01按路由延迟加载页面组件
- 02结合 React Suspense 或 loadable-components
- 03配合 react-router 等路由库
- 04说明现代框架的内置支持
适用场景
- 01减少多路由应用的初始加载代码
- 02仅为当前页面请求所需代码
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/route-based确认已加载。
详细介绍
基于路由的拆分
我们可以通过添加_基于路由的拆分_，按需请求仅特定路由需要的资源。将 React Suspense 或 loadable-components 与 react-router 等库结合使用，可以根据当前路由动态加载组件。
按路由延迟加载组件后，我们只会请求包含当前路由所需代码的包。大多数人都习惯了重定向时可能会有一些加载时间，因此这里正是延迟加载组件的理想时机！
适用场景
- 当应用有多个路由，且并非每个页面都需要所有代码时，使用此方法
- 这有助于缩短初始加载时间，因为只会加载当前路由所需的代码
说明
- 将 React Suspense 或
loadable-components与react-router等路由库结合使用 - 按路由延迟加载页面级组件，以实现最佳代码拆分效果
- 利用路由切换时自然出现的加载间隙，打造流畅体验
详情
按路由延迟加载组件后，只会请求包含当前路由所需代码的包。由于用户会预期导航时出现一些加载时间，因此路由切换是引入代码拆分、同时不影响体验的自然时机。
大多数现代框架（Next.js、Remix、React Router）都开箱支持基于路由的拆分。在自定义配置中，可以使用 React.lazy() 和 Suspense 包装路由级组件，也可以按路由配置打包工具的入口点。
来源
评论
支持 Markdown