源自 GitHubReact与Next.js性能调优审查
本功能汇集了Vercel官方工程团队整理的70项性能优化规范。当您编写新组件、排查Next.js页面卡顿或重构数据请求时，只需提供组件或页面代码，它便会从消除请求瀑布流、打包体积裁剪、服务端渲染优化、重渲染控制等8个维度分析瓶颈，并输出对照式的修改建议与优化后代码。适合具备React开发基础的工程师使用。
常见场景
它能帮你做什么？
01
消除接口请求瀑布流：审查多重await导致的串行请求，将其重构成并行加载或Suspense流式渲染以提升加载速度。
02
生产打包体积精简：排查Barrel桶文件深层导入、大体积第三方库以及缺少动态加载的组件，降低首屏资源消耗。
03
组件无意义重渲染优化：诊断useEffect派生状态滥用和props传递不稳定问题，规范使用过渡与缓存更新机制。
04
服务端操作与数据去重：针对Server Actions和RSC组件，添加React.cache数据去重与非阻塞异步处理。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“请根据Vercel最佳实践，审查我这个Next.js仪表盘页面的数据请求瀑布流问题并重构。”
“检查这个React表单组件频繁重渲染的原因，并给出遵循最佳实践的优化代码。”
“评估当前Next.js页面组件的打包体积瓶颈，指导如何改写为动态导入和轻量加载。”
“按照规范帮我重构这段包含嵌套await和全局事件监听的客户端Hook代码。”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes Agent可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
