SuperAPI AI 工具集

vercel-react-best-practices

前端与建站

查看项目

更新于 10-16 09:48

技能介绍

这是 Vercel Engineering 维护的 React 与 Next.js 性能优化指南,共 45 条规则、分为 8 个类别,并按影响程度排序,用于指导自动重构与代码生成。适用时机:编写新的 React 组件或 Next.js 页面、实现客户端或服务端数据获取、审查性能问题、重构现有 React/Next.js 代码、优化包体积或加载时间。

规则类别按优先级排列:消除瀑布流(CRITICAL,前缀 async-)、包体积优化(CRITICAL,bundle-)、服务端性能(HIGH,server-)、客户端数据获取(MEDIUM-HIGH,client-)、重渲染优化(MEDIUM,rerender-)、渲染性能(MEDIUM,rendering-)、JavaScript 性能(LOW-MEDIUM,js-)、高级模式(LOW,advanced-)。

各类别包含具体规则,例如 async-defer-await、async-parallel、bundle-barrel-imports、bundle-dynamic-imports、server-cache-react、client-swr-dedup、rerender-memo、rendering-content-visibility、js-early-exit、advanced-use-latest 等。

使用方式:阅读各规则文件获取详细说明和代码示例,如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md。每个规则文件包含:为什么重要的简要说明、错误代码示例及解释、正确代码示例及解释、额外背景与参考。完整合并文档见 AGENTS.md。

限制:资料未提供价格、收费、平台支持情况或实际效果数据,暂未提供。