如何利用 Vercel 最佳实践优化 React 与 Next.js 性能
通过将 Vercel 维护的 45 项性能优化规则集成到 AI 工作流中，让 AI 在生成代码或进行 Code Review 时，能够自动识别性能瓶颈并按照优先级实施重构。
为什么需要这个技能
在复杂的 React/Next.js 项目中，性能问题往往隐藏在细微的实现细节中，例如不必要的重渲染（Re-render）、请求瀑布流（Waterfalls）或过大的 Bundle 尺寸。
手动检查所有性能陷阱非常耗时。本技能将 Vercel 的专业优化经验转化为一套可执行的 AI 规则集，将性能优化从“事后打补丁”提前到“编写时预防”，确保代码在交付前就符合工业级性能标准。
适用场景
- 新功能开发：编写新的 React 组件或 Next.js 页面时，要求 AI 遵循最佳实践。
- 代码评审（CR）：让 AI 扫描现有代码，识别出低效的实现方式（如不合理的
await顺序）。 - 性能调优：针对页面加载慢、FPS 低或 Bundle 体积过大的具体问题进行专项重构。
- 数据获取优化：优化客户端或服务器端的数据请求策略。
核心工作流
本技能将优化规则分为 8 个优先级维度，AI 会按照以下顺序扫描并执行：
- 消除瀑布流 (Critical)：优先优化异步请求，将
await移至必要分支，使用Promise.all()实现并行请求。 - 包体积优化 (Critical)：避免 Barrel 导入，使用
next/dynamic动态导入大组件，延迟加载第三方分析脚本。 - 服务端性能 (High)：利用
React.cache()避免重复请求，最小化传递给客户端组件的数据量。 - 客户端获取 (Medium-High)：采用 SWR 机制实现请求去重。
- 重渲染优化 (Medium)：优化
useEffect依赖，使用startTransition处理非紧急更新。 - 渲染性能 (Medium)：将静态 JSX 提升至组件外部，优化 SVG 精度。
- JS 执行性能 (Low-Medium)：将重复查询改为 Map 结构，合并
filter/map循环。 - 高级模式 (Low)：使用
useLatest等模式保持回调引用稳定。
下载和安装
下载 react-best-practices 中文版 Skill ZIP
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐