optimising-expo-react-native-performance について
Expo React Native の開発者向けに、再現可能な測定とトレースを使って性能のボトルネックを調べるスキルです。動作や正確性を保ちながら、変更の効果と回帰を検証します。
主な機能
- 01再現可能な性能シナリオの設定
- 02代表的な端末でのリリースビルド計測
- 03起動・描画・メディア・通信の調査
- 04正確性とガード指標による変更検証
- 05証拠に基づく性能レポート作成
活用シーン
- 01アプリの起動遅延の調査
- 02フレーム落ちや入力遅延の診断
- 03画面遷移に伴うメモリ増加の追跡
- 04リリース前の性能変更の評価
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、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／ランタイム、New Architecture、ルーター、アップデート設定、パフォーマンスに影響する依存関係を確認します。Expo がサポートする React Native のバージョンがアプリの制約です。例に合わせるためだけに、最新の React Native を個別にインストールしないでください。
再現可能なシナリオと主要な指標を 1 つ定めます。指標の例として、コールドスタート時間、入力レイテンシ、フレームドロップ、ナビゲーションを繰り返した後に保持されるメモリ、リクエストのエンドツーエンドレイテンシがあります。ガードレールとなる指標もいくつか追加します。普遍的なしきい値を独自に作るのではなく、製品と対象デバイスに基づいて数値目標を合意します。
コミット、ビルド設定、デバイス／OS、熱状態、キャッシュ状態、データセット、ネットワーク条件、反復回数、測定方法を記録します。コールド実行とウォーム実行を分けてください。測定値が変動する可能性がある場合はベースラインと候補を交互に実行し、最良の実行結果や、裏付けのない p95 ではなく、分布とサンプル数を報告します。
診断、変更、検証
- 代表的なハードウェアでリリースビルドのベースラインを取得し、シナリオを再現します。シミュレーターと開発ビルドは診断に役立ちますが、出荷先デバイスでの測定の代わりにはなりません。
- 互換性のある診断ビルドで React Native DevTools を使い、React／JS の処理を特定します。ネイティブのシステムトレースと Instruments を使うと、メインスレッド、レンダリング、I/O、メモリ割り当てのコストを確認できます。これらの証拠の種類は区別してください。
references/01-profiling-toolchain.mdを参照してください。 - トレースやカウンターに裏付けられた、具体的な仮説を立てます。無関係な設定をいくつも変えず、関連する原因を 1 つ変更します。
- 同じシナリオと正確性のチェックを繰り返します。ガードレールに違反せず、実行ごとの変動を上回る効果がある場合にのみ、その変更を残します。
- 問題に見合った回帰チェックを追加します。バンドルサイズは入力レイテンシの代替指標ではありません。サイズのゲートですべてのパフォーマンス回帰を防げるとは主張しないでください。
ボトルネックに応じて調査する
| 証拠 | 調査対象 | 参考資料 |
|---|---|---|
| インタラクティブになるまでの処理や JS の評価が長い | 起動のクリティカルパス、先行インポート、アセット読み込み、アップデートのペイロード | references/02-startup-bundle-ota.md |
| JS の長いタスクや、コストの高いコミットの繰り返し | 状態の所有者、派生処理、上限を設けたスケジューリング、コンパイラーの適用範囲 | references/03-rendering-js-ui.md |
| JS が停止している間に UI が停止する | レイアウト、コンポジット、画像デコード、ネイティブアニメーション | references/03-rendering-js-ui.md |
| スクロール／再利用やメディアによる負荷 | 行の ID、リスト API、画像サイズ／キャッシュ、動画のライフサイクル | references/04-lists-images-media.md |
| 保持される JS ヒープや増加するネイティブメモリ使用量 | ナビゲーションの繰り返し、リスナー、クロージャ、メディアの解放 | references/01-profiling-toolchain.md |
| 再取得の集中やブロッキングリクエスト | 重複排除、キャッシュのセマンティクス、ページネーション、キャンセル | references/05-network-background.md |
現行 API のルール：削除された InteractionManager API ではなく、上限を設けた requestIdleCallback の処理を使ってください。スケジューリングをしても、CPU 処理は JS スレッドから移動しません。FlashList v2 は New Architecture と自動サイズ調整を必要とします。サイズ見積もり用のプロパティは追加しないでください。React Compiler の設定をインストールまたは重複させる前に、すでに実行されているか確認します。
バンドルスクリプトを実行したりテンプレートを読み込んだりする前に、SKILL_DIR をこのスキルのインストールディレクトリに解決してください。対象プロジェクトは別途渡してください。その scripts/ ディレクトリはスキルのディレクトリではありません。
成果物
レポートが役立つ場合は、assets/templates/perf-audit-report-template.md を使用してください。観測された症状、ベースライン、因果関係を示す証拠、具体的な変更内容、比較可能な変更前後の結果、正確性の確認、トレードオフ、未解明の点を含めてください。ソースコードのみを扱う場合は、計測時間を捏造したり、アプリが速くなったと主張したりせず、仮説と実行可能な計測計画を提示してください。
メトリクスの定義には references/00-principles-and-kpis.md を、回帰制御のアイデアには references/06-ci-regression.md を使用してください。古いプロジェクト構成に記載されたパッケージのインストール方法やビルドフラグは、普遍的なデフォルトとして扱わず、インストール済みの SDK に照らして確認してください。