react-best-practices
使用 Vercel 最佳实践优化 React 和 Next.js 性能
也可从以下获取: vercel-labs,0xBigBoss,0xBigBoss
React 性能不佳会导致加载缓慢和用户不满。本技能提供来自 Vercel 工程团队的 45 条优先规则，帮助消除瀑布流请求、减少打包体积并优化渲染性能。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-best-practices”。 审查此数据获取模式是否存在瀑布流问题
预期结果:
- 问题：顺序 await 调用创建瀑布流（3 轮请求）
- const user = await fetchUser()
- const posts = await fetchPosts()
- const comments = await fetchComments()
- 修复：使用 Promise.all() 并行执行（1 轮请求）
- const [user, posts, comments] = await Promise.all([
- fetchUser(),
- fetchPosts(),
- fetchComments()
- ])
正在使用“react-best-practices”。 如何懒加载重量级代码编辑器组件
预期结果:
- 使用 next/dynamic 懒加载重量级组件：
- import dynamic from 'next/dynamic'
- const MonacoEditor = dynamic(
- () => import('./monaco-editor').then(m => m.MonacoEditor),
- { ssr: false, loading: () => <LoadingSkeleton /> }
- )
- 这会将约 300KB 的打包延迟到组件渲染时，提高 TTI。
安全审计
安全Static analyzer detected 912 patterns but all are FALSE POSITIVES. The skill contains markdown documentation with code examples for educational purposes, not executable code. Patterns like 'backtick execution' are shell commands in README examples (pnpm build), 'dynamic imports' are React next/dynamic usage examples, 'storage access' shows localStorage caching patterns, and 'network' patterns are fetch API documentation examples. No actual security vulnerabilities exist.
质量评分
你能构建什么
前端开发 React 应用
在编写新组件或页面时使用此技能，确保从一开始就具有最佳性能。该技能指导打包优化、正确的数据获取模式和重新渲染预防技术。
技术负责人审查拉取请求
在代码审查期间参考这些规则，在合并之前捕获性能反模式，如顺序异步调用、不必要的 barrel 导入或缺失的 Suspense 边界。
AI 助手重构遗留代码
应用这些优先级规则系统性地改进现有 React 代码库，首先处理关键的瀑布流消除，然后解决中等影响的渲染优化问题。
试试这些提示
使用 Vercel 最佳实践审查此 React 组件。识别瀑布流、不必要的重新渲染和打包优化机会。提供具体的修复建议和代码示例。
重构此代码以消除异步瀑布流。对独立操作使用 Promise.all() 并将 await 移动到实际需要结果的地方。
对此组件应用代码分割策略。识别 next/dynamic 导入、条件加载和用户交互时预加载的机会。
分析此组件的不必要重新渲染问题。根据情况应用记忆化、正确的依赖数组、派生状态订阅和函数式 setState 模式。
最佳实践
- 在中等影响优化之前先处理关键的瀑布流消除
- 使用 React.cache() 进行每请求去重，使用 LRU 缓存进行跨请求缓存
- 使用函数式 setState 提取稳定的回调，必要时将处理程序存储在 refs 中
避免
- 对独立操作使用顺序 await 调用
- 导入整个工具库而不是特定函数
- 直接将函数作为 effect 依赖传递而不是原始值