vercel-react-best-practices · 排查 React 页面为什么慢

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

页面先 await getProfile()，再 await getProjects()；两者都只依赖当前用户 ID，互不依赖；两者均须成功才能展示完整页。

输出

编辑示例 · 未运行

// 两个调用互不依赖时可并行启动
const [profile, projects] = await Promise.all([
  getProfile(userId),
  getProjects(userId),
]);

验证：结果和权限检查保持一致；确认任一失败时页面错误行为符合需求。
测量：同环境比较两个请求的起始时间和页面等待时长。未运行前不声明节省了多少毫秒。

按 Vercel 的 React/Next.js 规则检查请求串行、包体积和重复渲染，把优化落到具体代码。

具体任务

并行获取互不依赖的页面数据：按 Vercel 的 React/Next.js 规则检查请求串行、包体积和重复渲染，把优化落到具体代码。

检查组件与包体开销：定位大依赖、重复读取和不必要渲染，再选择动态导入、缓存或状态调整。

必需材料

相关 React/Next.js 组件与数据路径

框架版本和性能症状

可选材料

trace 或网络记录

包体分析

使用门槛

能运行受影响路由并区分服务器等待、下载和重复渲染。

这个 Skill 额外提供的方法

优先处理请求瀑布与大包等高影响问题，再看局部渲染，避免一上来滥用 memo。

编辑示例（未运行）

并行获取互不依赖的页面数据

任务：请根据下面的示例材料完成并行获取互不依赖的页面数据，把判断依据和待确认事项写清楚。

输入：
页面先 await getProfile()，再 await getProjects()；两者都只依赖当前用户 ID，互不依赖；两者均须成功才能展示完整页。

结果片段：
```typescript
// 两个调用互不依赖时可并行启动
const [profile, projects] = await Promise.all([
  getProfile(userId),
  getProjects(userId),
]);
```

验证：结果和权限检查保持一致；确认任一失败时页面错误行为符合需求。
测量：同环境比较两个请求的起始时间和页面等待时长。未运行前不声明节省了多少毫秒。

优先处理请求瀑布与大包等高影响问题，再看局部渲染，避免一上来滥用 memo。 该片段是编辑示例，用于说明交付形态，未运行上游技能。

首次任务

请使用「排查 React 页面为什么慢」完成「并行获取互不依赖的页面数据」。
任务要求：优先处理请求瀑布与大包等高影响问题，再看局部渲染，避免一上来滥用 memo。

我的必需材料：
- 相关 React/Next.js 组件与数据路径：[请填写或粘贴]
- 框架版本和性能症状：[请填写或粘贴]

请基于上述实际材料输出：按影响排序的问题、修改建议或代码补丁，以及验证方式。缺少依据的地方单列为待确认，不编造事实；未执行的操作或测试明确标为未执行。

验收要求：
1. 变更保持业务结果和错误语义。
2. 请求真实独立才并行。
3. 目标路由在同条件下复测且无兼容回归。

验收方法

变更保持业务结果和错误语义

请求真实独立才并行

目标路由在同条件下复测且无兼容回归

依赖与准备

需要现有 React/Next.js 项目与完整规则目录；性能工具和构建分析按项目提供，规则来源是固定版本指南而非当前项目实测结论。

使用边界

规则建议必须结合项目版本与实际依赖关系，不能机械并行存在前后依赖的请求。

没有同条件测量不能宣称页面提速比例。

排错

并行后拿不到后一步参数：说明请求存在依赖，恢复正确顺序或只并行独立部分。

到处加 memo 仍然慢：回到网络与性能证据，先查瀑布、包体和高成本任务。

固定来源

https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices/SKILL.md

先看看示例

输入

输出

方法说明