react-best-practices

这玩意儿干嘛的？

Vercel 工程师出品的 React/Next.js 性能优化指南。包含 70 条规则，覆盖 8 大类别，从消除请求瀑布流、Bundle 大小优化到服务端性能、重新渲染优化，全部是经过生产验证的最佳实践。25,128 颗星。

AI 写的 React 代码往往性能堪忧——重复请求、过度渲染、包体积大。装了这个 Skill，AI 在写代码时自动遵循 Vercel 的 70 条优化规则，从源头避免性能问题，比事后用 Lighthouse 扫描省心太多。

在写 React/Next.js 组件、API 路由、数据获取逻辑时，AI 会自动参考最佳实践。也可以主动触发：「帮我 review 这个组件的性能」。

8 大优先级：消除瀑布流(CRITICAL) → Bundle优化(CRITICAL) → 服务端性能(HIGH) → 客户端数据获取(MEDIUM-HIGH) → 重新渲染优化(MEDIUM) → 渲染性能(MEDIUM) → JS性能(LOW-MEDIUM) → 高级模式(LOW)。

功能	说明
消除请求瀑布流	async-parallel、async-dependencies 等并行策略
Bundle 体积优化	barrel文件避免、动态导入、tree-shaking
服务端性能	React.cache()、LRU缓存、并行数据获取
重新渲染优化	memo、useCallback、useMemo 正确使用
渲染性能	content-visibility、Suspense边界
JS 执行优化	Map/Set 替代对象遍历
高级模式	useEffectEvent、useLatest 等进阶 Hook