用途概括Vercel 维护的 React/Next.js 性能优化指南，含 8 类 70 条规则。提供消除瀑布流、包优化、服务端/客户端渲染与重渲染的优先最佳实践。帮助 Agent 编写、审查、重构代码以提升性能、减小包体积。
业务领域
Coding
技能形态
Style Guide
业务领域
技能形态
技能解析
剖析技能的工作原理和产出物，快速判断你的场景与价值。
在编写、审查或重构 React/Next.js 代码，或优化包体积、数据获取与渲染性能时使用。
代码符合 Vercel 工程最佳实践：减少瀑布请求、缩小包体、提升服务端/客户端性能、优化重渲染。
使用场景
开发者编写新的 Next.js 仪表盘页面，含多个数据请求与第三方组件。应用本技能后，他们学会并行请求（async-parallel）、动态导入重型组件（bundle-dynamic-imports）、去重客户端请求（client-swr-dedup）。最终加载更快、首屏 JS 更小、体验更流畅，无需反复试错。
代码审查中，工程师发现列表过度重渲染且包体过大。使用本技能查阅 rerender-memo 与 bundle-barrel-imports 规则，重构组件并消除桶导入。PR 获得基于优先级的明确建议，合并前减少重渲染并缩减包体积。
技能关系
依赖关系读作「上一格指向下一格」。当前 Skill 位于第二格，上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
第二层 · 当前 Skill
第三层 · 我用了这些 Skills
在所属技能集的全局上下文中浏览当前 Skill 的关系。点击节点切换右侧详情,搜索框可快速定位技能。
技能文件