mcpField
O
optimising-expo-react-native-performance

optimising-expo-react-native-performance

github.com/tristanmanchester开发493 次安装7 周前更新
代码仓库

关于 optimising-expo-react-native-performance

面向 Expo React Native 开发者的性能诊断技能,通过可重复测量和追踪证据定位瓶颈,并验证改动是否引入回归。

主要功能

  1. 01定义可重复的性能场景
  2. 02在代表性设备上分析发布构建
  3. 03追踪启动、渲染、媒体和网络问题
  4. 04依据正确性与指标护栏验证改动
  5. 05生成基于证据的性能报告

适用场景

  1. 01调查应用启动缓慢
  2. 02诊断掉帧或输入延迟
  3. 03追踪导航过程中的内存增长
  4. 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.md
perf-budgets.example.json
references/
00-principles-and-kpis.md
01-profiling-toolchain.md
02-startup-bundle-ota.md
03-rendering-js-ui.md
04-lists-images-media.md
05-network-background.md
06-ci-regression.md
07-new-architecture.md
resources.md
scripts/
check-budgets.mjs
README.md
report-export-sizes.mjs

详细介绍

提升 Expo React Native 性能

从用户遇到的卡顿流程入手,而不是罗列时髦的优化手段。在改善经测量确认的瓶颈时,保留原有行为、无障碍支持、错误报告和数据正确性。

建立实验

检查包管理器和锁文件、Expo SDK、React Native 和 React 版本、Hermes/运行时、新架构、路由器、更新配置,以及对性能敏感的依赖项。Expo 支持的 React Native 版本是应用的约束;不要为了匹配示例而单独安装最新版本的 React Native。

定义可重复的场景和一个主要指标:冷启动时间、输入延迟、丢帧、导航循环后的内存保留量,或端到端请求延迟。再添加少量护栏指标。根据产品需求和目标设备确定数值预算,而不是凭空设定通用阈值。

记录提交、构建配置、设备/OS、热状态、缓存状态、数据集、网络条件、重复次数和测量方法。区分冷启动和热启动运行。如果存在结果漂移的可能,交替进行基线和候选版本的运行;报告分布和样本数,不要只报告最佳结果或未经支持的 p95。

诊断、修改、验证

  1. 在有代表性的硬件上复现问题,并采集发布构建的基线数据。模拟器和开发构建适合用于诊断,但不能替代对实际出货设备的测量。
  2. 在兼容的诊断构建中使用 React Native DevTools 分析 React/JS 开销;原生系统跟踪和 Instruments 可揭示主线程、渲染、I/O 和分配开销。区分这些证据类型。参见 references/01-profiling-toolchain.md。
  3. 根据跟踪记录或计数器提出具体假设。针对一个相关原因进行修改,不要同时调整多个无关参数。
  4. 重复相同的场景和正确性检查。只有当收益超过运行间的波动,且未破坏任何护栏指标时,才保留这项修改。
  5. 根据问题严重程度添加相应的回归检查。包体积不能代表输入延迟;不要声称体积检查门槛可以防止所有性能回归。

根据瓶颈选择方向

证据调查方向参考资料
交互前耗时过长或 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 为准进行验证,不要将其视为通用默认设置。

评论

支持 Markdown