mcpField
R
react-native-performance

react-native-performance

github.com/maikotrindade開発1350 回インストール1 日前に更新
リポジトリ

react-native-performance について

React Native アプリの性能を調査・改善する開発者向けのリファレンススキルです。描画、起動、バンドル、ネイティブ性能、メモリ、分析ツールを扱います。

主な機能

  1. 01FPS と再レンダーの指針
  2. 02バンドルサイズ削減手法
  3. 03TTI の測定方法
  4. 04ネイティブ性能とスレッド
  5. 05メモリリークのパターン
  6. 06プロファイリングツールの情報

活用シーン

  1. 01FPS や起動時間の基準測定
  2. 02バンドル肥大化の原因調査
  3. 03JavaScript またはネイティブのメモリリーク調査
  4. 04アプリ分析ツールの選定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/maikotrindade/awesome-react-native-skills --skill react-native-performance

インストール後、Claude Code で/react-native-performanceを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
best-practices-profiling.md
core-bundle-size.md
core-fps-rerenders.md
features-memory.md
features-native-performance.md
features-tti.md

詳細

React Native のパフォーマンス

詳細なパフォーマンスリファレンスです。 React Native のパフォーマンスに関する主要な情報源です。FlatList のチューニング、メモ化、Hermes、expo-image、FPS の測定、バンドルのツリーマップ分析、Hermes mmap、R8 Android、16 KB ページサイズのアラインメント、ビューのフラット化、ネイティブスレッド処理、JNI メモリのパターン、プロファイリングツールチェーンを扱います。

Fabric／JSI／TurboModules のアーキテクチャ概要については、react-native-core/features-new-architecture.md を参照してください。

コアリファレンス

トピック説明リファレンス
FPS と再レンダリングFPS の測定、profile-react、React Compiler（Expo SDK 54+）、アトミックな状態管理、Concurrent React、Reanimated ワークレット（v3/v4）core-fps-rerenders
バンドルサイズアプリサイズと JS バンドルの削減 — Ruler、Emerge、source-map-explorer、Expo Atlas、ツリーシェイキング、バレルエクスポート、R8、アセットカタログ、Hermes mmap、コード分割core-bundle-size

機能

トピック説明リファレンス
インタラクティブになるまでの時間TTI の測定方法、コールドスタートのパイプラインマーカー、react-native-performancefeatures-tti
ネイティブパフォーマンスTurboModule のスレッド処理、同期と非同期、ビューのフラット化、JS ポリフィルよりネイティブ SDK を優先、16 KB のアラインメント、プラットフォームのセットアップfeatures-native-performance
メモリJS のリーク検出、ネイティブの参照サイクル、JNI 参照、スマートポインター、よくあるリークパターンfeatures-memory

ベストプラクティス

トピック説明リファレンス
プロファイリングツールDevTools のフレームグラフ、Flashlight、Xcode Instruments、Android Studio Profiler、Perfetto、バンドルアナライザーbest-practices-profiling

主な推奨事項

  • まず必ず測定してください — ベースラインなしで最適化してはいけません（FPS／TTI には Flashlight、バンドルには source-map-explorer を使用）
  • Hermes mmap は RN 0.79+ で削除されました — JS バンドルは常駐メモリとなり、バンドルサイズが起動時のメモリに直接影響します
  • TurboModules — 高速な処理には同期メソッドを優先し、処理がスレッドをまたぐ場合にのみ非同期を使用してください
  • React Compiler は Expo SDK 54+ でオプトインできます（experiments.reactCompiler: true）。大半の useMemo／useCallback を置き換えます
  • リファクタリングの前にプロファイリングしてください — パフォーマンス改善の 80% は、マイクロ最適化ではなく、ウォーターフォール、コストの高いレンダリング、肥大化したバンドルの削減によって得られます
  • Reanimated v3 は安定版、v4 はオプトイン／ベータ版です — プロジェクトごとにどちらか一方を選び、混在させないでください

コメント

Markdown 対応