关于 optimising-expo-react-native-performance
面向 Expo React Native 开发者的性能诊断技能,通过可重复测量和追踪证据定位瓶颈,并验证改动是否引入回归。
主要功能
- 01定义可重复的性能场景
- 02在代表性设备上分析发布构建
- 03追踪启动、渲染、媒体和网络问题
- 04依据正确性与指标护栏验证改动
- 05生成基于证据的性能报告
适用场景
- 01调查应用启动缓慢
- 02诊断掉帧或输入延迟
- 03追踪导航过程中的内存增长
- 04发布前评估性能改动
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ tristanmanchester/ agent-skills --skill optimising-expo-react-native-performance安装后在 Claude Code 中输入/optimising-expo-react-native-performance确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
assets/templates/perf-audit-report-template.mdperf-budgets.example.jsonreferences/00-principles-and-kpis.md01-profiling-toolchain.md02-startup-bundle-ota.md03-rendering-js-ui.md04-lists-images-media.md05-network-background.md06-ci-regression.md07-new-architecture.mdresources.mdscripts/check-budgets.mjsREADME.mdreport-export-sizes.mjs详细介绍
提升 Expo React Native 性能
从用户遇到的卡顿流程入手,而不是罗列时髦的优化手段。在改善经测量确认的瓶颈时,保留原有行为、无障碍支持、错误报告和数据正确性。
建立实验
检查包管理器和锁文件、Expo SDK、React Native 和 React 版本、Hermes/运行时、新架构、路由器、更新配置,以及对性能敏感的依赖项。Expo 支持的 React Native 版本是应用的约束;不要为了匹配示例而单独安装最新版本的 React Native。
定义可重复的场景和一个主要指标:冷启动时间、输入延迟、丢帧、导航循环后的内存保留量,或端到端请求延迟。再添加少量护栏指标。根据产品需求和目标设备确定数值预算,而不是凭空设定通用阈值。
记录提交、构建配置、设备/OS、热状态、缓存状态、数据集、网络条件、重复次数和测量方法。区分冷启动和热启动运行。如果存在结果漂移的可能,交替进行基线和候选版本的运行;报告分布和样本数,不要只报告最佳结果或未经支持的 p95。
诊断、修改、验证
- 在有代表性的硬件上复现问题,并采集发布构建的基线数据。模拟器和开发构建适合用于诊断,但不能替代对实际出货设备的测量。
- 在兼容的诊断构建中使用 React Native DevTools 分析 React/JS 开销;原生系统跟踪和 Instruments 可揭示主线程、渲染、I/O 和分配开销。区分这些证据类型。参见
references/01-profiling-toolchain.md。 - 根据跟踪记录或计数器提出具体假设。针对一个相关原因进行修改,不要同时调整多个无关参数。
- 重复相同的场景和正确性检查。只有当收益超过运行间的波动,且未破坏任何护栏指标时,才保留这项修改。
- 根据问题严重程度添加相应的回归检查。包体积不能代表输入延迟;不要声称体积检查门槛可以防止所有性能回归。
根据瓶颈选择方向
| 证据 | 调查方向 | 参考资料 |
|---|---|---|
| 交互前耗时过长或 JS 求值耗时过长 | 启动关键路径、急切导入、资源加载、更新载荷 | references/02-startup-bundle-ota.md |
| JS 任务耗时过长或反复进行开销大的提交 | 状态归属、派生计算、有界调度、编译器覆盖情况 | references/03-rendering-js-ui.md |
| JS 空闲时 UI 仍卡顿 | 布局、合成、图像解码、原生动画 | references/03-rendering-js-ui.md |
| 滚动/回收或媒体压力 | 行标识、列表 API、图像尺寸/缓存、视频生命周期 | references/04-lists-images-media.md |
| JS 堆内存持续保留或原生占用不断增长 | 重复导航、监听器、闭包、媒体释放 | references/01-profiling-toolchain.md |
| 重复请求激增或请求阻塞 | 去重、缓存语义、分页、取消 | references/05-network-background.md |
当前 API 规则:使用有界的 requestIdleCallback 任务,不要使用已移除的 InteractionManager API。调度不会把 CPU 工作移出 JS 线程。FlashList v2 需要新架构,并会自动确定尺寸;不要添加尺寸估算属性。安装或重复配置 React Compiler 之前,先检查它是否已经在运行。
运行捆绑脚本或加载模板前,将 SKILL_DIR 解析为此技能的安装目录。单独传入目标项目;项目的 scripts/ 目录并非技能目录。
交付内容
如果报告有用,请使用 assets/templates/perf-audit-report-template.md。报告应包含观察到的症状、基线、因果证据、确切的更改、可比的优化前后结果、正确性检查、权衡和仍未解决的问题。对于仅涉及源代码的工作,请提供假设和可运行的测量计划,不要编造耗时数据,也不要声称应用现在更快了。
使用 references/00-principles-and-kpis.md 了解指标定义,并使用 references/06-ci-regression.md 参考回归控制思路。对于较旧项目配置中的软件包安装方式和构建标志,应以已安装的 SDK 为准进行验证,不要将其视为通用默认设置。