推进 React・Next.js 性能优化的 react-performance
機械翻訳 / Machine-translated
cccskills
21時間前・9分で読める
機械翻訳 / Machine-translated
原文：推进 React・Next.js 性能优化的 react-performance（cccskills）
技能页面：react-performance
本文结论
如果你正在使用 React・Next.js 开发，安装 react-performance 后，就能与 AI Agent 一起排查页面加载慢的原因。
排查顺序依次为：数据获取的等待时间、下发的代码体积、重渲染。
本文将依次介绍该技能涵盖的 8 个领域、安装方法、请求示例以及使用注意事项。
可以让 Agent 按影响程度从大到小逐一排查慢的原因。
例如，你可以这样提问：
这个页面的首次显示很慢。
请按优先级从高到低查找原因，并提出修复建议。
Agent 首先确认的是数据获取的等待时间。
如果互相不依赖的 await 依次排列，就将其改写为用 Promise.all 并行执行的形式。
对于 Server Component 中连续等待的处理，会提出拆分为子组件并行运行的方案。
接下来查看的是首次下发的 JavaScript 体积。
候选修复方案包括：将从 barrel 文件（通过 index.ts 统一导出的形式）的 import 改为独立 import，以及用 next/dynamic 将体积较大的组件延迟加载。
分析工具等外部脚本则通过 next/script 推迟到页面显示后再加载。
重渲染和细节处理的速度将在此之后再进行确认。
react-performance 是一个技能，它将 70 余条改进规则按 8 个领域分类，并以优先级顺序排列成参考表，赋予 Agent 使用。
该技能基于 Vercel Labs 公开的 react-best-practices。
| 优先级 | 领域 | 主要对象 |
|---|---|---|
| 1（最重要） | 消除数据获取等待 | 连续出现的独立 await |
| 2（最重要） | 减少下发代码体积 | 首次加载的 JavaScript、外部库 |
| 3（高） | 服务端处理 | Server Components、Server Actions、API 路由 |
| 4（中～高） | 浏览器端数据获取 | SWR、TanStack Query、Hook 内的 fetch |
| 5（中） | 减少重渲染 | 频繁的状态更新、从父组件到子组件的连锁 |
| 6（中） | 渲染速度 | 长列表、动画、hydration |
| 7（低～中） | JavaScript 处理 | 繁重的循环、频繁的内存分配 |
| 8（低） | 进阶模式 | 稳定引用、effect 与事件的协同 |
数据获取等待被列为最高优先级，原因在于顺序等待的 await 每次都会将整个通信等待时间叠加上去。
这个技能的处理思路是：在关注细节写法优化之前，先解决等待问题和下发体积问题。
技能中还包含一张对应表，按 Lighthouse 和 Web Vitals 的各项指标，说明应重点排查的领域。
这张表帮助 Agent 判断当某项指标数值不佳时，应从哪个领域入手。
| 指标 | 主要排查领域 |
|---|---|
| LCP（最大内容元素显示所需时间） | 数据获取等待、下发代码体积、资源预加载 |
| INP（从操作到下一帧渲染所需时间） | 重渲染、渲染速度、JavaScript 处理 |
| CLS（布局偏移） | 渲染速度（Suspense 放置方式、图片尺寸） |
| TBT（主线程阻塞总时间） | 下发代码体积、JavaScript 处理、外部脚本延迟 |
技能中也包含 Review 视角。
带有 "use server" 的函数是可从外部调用的入口，因此 Agent 会提示需要在函数内部进行认证和权限校验。
在服务端模块变量中保存状态会导致用户间共享的问题，这也是排查对象之一。
安装方式有两种：通过命令安装，或直接请求 Agent 安装。
命令如下，执行时可选择安装目标 Agent，如 Claude Code 或 Codex 等。
npx skills add https://github.com/affaan-m/ECC --skill react-performance
如果请求 Agent 安装，请直接发送以下内容：
次の Agent Skill をインストールしてください。
https://github.com/affaan-m/ECC/tree/main/skills/react-performance
まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/react-performance/、Codex なら ~/.agents/skills/react-performance/ に配置してください。
存放位置会根据是在所有项目中使用，还是仅在特定项目中使用而有所不同。
| Agent | 在所有项目中使用 | 仅在特定项目中使用 |
|---|---|---|
| Claude Code | ~/.claude/skills/ | 项目的 .claude/skills/ |
| Codex | ~/.agents/skills/ | 项目的 .agents/skills/ |
在请求中明确写出要排查的领域，可以缩小排查范围。
以下介绍三个典型示例。
请找出这个页面中数据获取顺序等待的地方，并改为并行执行。
独立的获取操作可以合并为 Promise.all。
将 await 推迟到使用数据的分支内部的修改也属于优化对象。
对于像判断 props 是否存在这类可在本地判断的条件，会将其顺序调整到通信发起之前。
请列出可以减少首次加载 JavaScript 体积的地方。
候选项包括：通过 barrel 文件引入的 import，以及像体积较大的图表组件这类可以延迟加载的组件。
仅管理员使用的页面等可按条件加载的模块也属于优化对象。
作为直观确认下发体积的手段，技能还会推荐使用 @next/bundle-analyzer。
请从性能角度 Review 这个 PR，并同时检查不必要的重渲染。
首先会指出的是：在回调中订阅了仅在该回调内使用的值的地方。
在渲染过程中可以计算出的值却用 useEffect 来生成的地方，以及在组件内部定义另一个组件的地方，也属于指摘对象。
同时还会确认 Server Actions 中是否包含认证逻辑。
本技能是改进指南，而非性能测量工具。
请在修改前后分别使用 Lighthouse 等工具实际测量数值，以确认优化效果。
是否采用某项改写方案，需结合实际代码和测量结果来判断。
适用对象为 React 18/19 和 Next.js，不同功能所需版本不同。
在响应返回后执行处理的 after() 是 Next.js 15 的功能，用于切换显示与隐藏的 <Activity> 是 React 19 的功能。
自动优化 barrel 文件的配置可在 Next.js 13.5 及以上版本中使用。
在引入了 React Compiler 的项目中，手动抑制重渲染的规则仅用于 Review 时的确认。
手动添加 useMemo 和 useCallback 的工作交由编译器处理。
技能包含的文件仅为 SKILL.md，不附带脚本。
SKILL.md 的相关条目中会出现 react-reviewer 等 Agent 和命令，但这些并不包含在本技能中。
许可证为 MIT，原始资料也采用 MIT 许可证。
建议在安装前先阅读一遍内容，以便放心使用。
同一仓库中的 accessibility 是一个技能，用于使 Web 等界面支持朗读和键盘操作，并按照 WCAG 2.2 进行检查。
在检查页面速度的同时也想检查可用性时，可以将两者结合使用。
有用。
手动抑制重渲染的规则仅用于 Review 时的确认，但数据获取等待和下发代码体积这两个领域不在编译器的处理范围内。
优先级较高的领域可以照常使用。
适用对象为 React 18/19 和 Next.js。
减少重渲染、长列表渲染等 React 侧的规则也有很多。
next/dynamic 和 after() 等 Next.js 专有条目仅适用于使用 Next.js 的情况。
不会。
包含的内容仅为 SKILL.md。
由于技能中包含 Web Vitals 各指标与应排查领域的对应表，因此适合将 Lighthouse 等工具的测量结果展示给 Agent，让其进行分析的使用方式。
react-performance 是一个技能，它将排查 React・Next.js 性能瓶颈的指南——按数据获取等待、下发代码体积、重渲染的顺序——赋予 Agent 使用。
8 个领域、70 余条规则按优先级排列，无需纠结从哪里开始修复。
也可在 PR Review 时让 Agent 检查性能以及 Server Actions 的认证情况。
可从 cccskills 页面 开始安装。
本文转载自 cccskills 的文章「推进 React・Next.js 性能优化的 react-performance」。
技能详情和安装方法请参阅 cccskills 的 react-performance 页面。