用途:该技能面向 Next.js 与 React 的性能优化,源自 Vercel Engineering,共 57 条规则,按影响优先级分为 8 个类别。核心理念是先消除瀑布流,再优化包体积,最后做微优化。
主要能力:内容分为 8 个部分——1 消除瀑布流(CRITICAL,5 条)、2 包体积优化(CRITICAL,5 条)、3 服务端性能(HIGH,7 条)、4 客户端数据获取(MEDIUM-HIGH,4 条)、5 重渲染优化(MEDIUM,12 条)、6 渲染性能(MEDIUM,9 条)、7 JavaScript 性能(LOW-MEDIUM,12 条)、8 高级模式(VARIABLE,3 条)。提供快速决策树、影响优先级指南、性能审查清单、反模式清单与学习路径。
使用方式:技能要求按需选择性阅读,只加载与任务相关的章节。性能审查从 CRITICAL 章节开始,再进入 HIGH/MEDIUM。新功能开发时参考第 1、2 节预防瀑布流并控制包体积,默认使用服务端组件(第 3 节),对昂贵操作做记忆化(第 5 节)。调试时先识别症状,再按决策树定位章节。附带校验脚本:python scripts/react_performance_checker.py <project_path>。
适用场景:构建 React 组件、优化性能、消除瀑布流、排查慢页面加载、包体积过大、SSR 慢、重渲染过多、渲染瓶颈与客户端数据获取问题。
限制:资料未提供该技能的安装方式、收费与价格、支持平台、具体效果数据;规则细节需查阅各章节文件,本介绍不展开完整代码示例。