React ネイティブのレイジーローディングの理解

React Native は、クロスプラットフォームのモバイル開発のための go-to フレームワークになっています。これにより、開発者は JavaScript と React でネイティブレベルのアプリをビルドできます。アプリケーションスケールとして、特に初期のロード中にパフォーマンスのボトルネックが出現することが多いです。これらの問題を軽減するための最も効果的な戦略の 1 つが レイジーローディング] です。この技術は、コンポーネント、スクリーン、アセットの読み込みを効果的に行なうようにします。アプリの起動時間を減らし、このガイドを深く理解し、このガイドを実装します。

怠惰なローディングは何ですか?

レイジーローディングは、オブジェクト、コンポーネント、またはリソースの初期化を要求されるポイントまで延期する設計パターンです。React Nativeのコンテキストでは、ユーザーがそれをナビゲートするか、可視性が重要になるまで、画面またはコンポーネントがロードされ、レンダリングされることはありません。主な目標は次のとおりです。

  • []Faster 初期レンダー] – アプリは、必須コンポーネントのみで起動します。そのため、ユーザーはコンテンツがより早く表示されます。
  • ] メモリ使用量が低い – 未使用のコンポーネントはメモリに保持されません。
  • ] 応答性を改善しました[ - 起動時に大幅なインポートによってメインスレッドがブロックされていません。

React Native では、通常、動的インポート()と を使用して、または ] のようなライブラリ固有のソリューションを介して、画面レベルのレイジーロード用の を有効化します。

React ネイティブでのレイジーローディングの利点

怠惰なローディングの収穫の収穫の広い範囲の性能の改善を採用します:

  1. []初期バンドルサイズを削減しました。コード分割により、JavaScriptのバンドルは、要求に応じてロードされたより小さなチャンクに分割することができます。 これは、React Nativeアプリが起動時に解析および実行されなければならない単一のJavaScriptバンドルを出荷するので、これは重要です。
  2. []対話時間(TTI)[[ - 重計算と大きなライブラリのインポートが拒否されるため、アプリは早期に使用可能になります。
  3. バッテリー寿命 - アイドルリソースがロードされず、CPU使用量を減らし、バッテリーを節約できます。
  4. []より簡単なメンテナンス] - レイジーローディングは、モジュール式コードを促し、コードベースをナビゲートし、テストが容易になります。

これらの利点は普遍的なですが、怠惰なローディングは、多くの画面、複雑なチャート、リッチメディア、またはサードパーティSDKを持つアプリにとって特に価値があります。

React.lazy と Suspense でレイジーローディングを実施

React Native はバージョン 0.62 以降、 と をサポートしています。しかし、React と比較してニュアンスがあります。具体的な実装を続けていきましょう。

基本セットアップ

まず、互換性のある React ネイティブ バージョン (>=0.62) を使用しており、バンドル (Metro) が動的インポートをサポートするように構成されていることを確認してください。 メトロは、バージョン 0.59 以降、動的インポートのアウト・オブ・ザ・ボックスをサポートしています。

ステップ1 - コンポーネントをロードするレイジー

複雑なチャートや大きなリストなど、重コンポーネントを作成し、[]を使用してインポートします。

[]

ステップ2 - サスペンスでラップ

コンポーネントがロードされる間、フォールバックUIを提供:

[]

React ネイティブの重要な洞窟

ウェブでは、React.lazy とシームレスに が機能します。React Native では、 は利用でき、コンポーネントの種類は完全に内部で機能します。特にレガシークラスコンポーネントやコンポーネントは、副作用に に依存しています。常に、デバイス上のレイジーロードされたコンポーネントをテストします。ホックを使用してほとんどの機能コンポーネントについては、それはうまく動作します。

高度なレイジーローディングテクニック

画面レベルのレイジーローディングとReactナビゲーション

モバイルアプリでの遅延ローディングの最も一般的な使用例は、画面のロードを延期しています。 反応ナビゲーション、デファクトナビゲーションライブラリ、その[]のプロップと動的を介してボックスからこのパターンをサポート。

React の運行 6 の例:

[]]

[]prefetching[]を使用して、さらに最適化できます。 タブの上にユーザーホバーを移動したり、画面に移動したりすると、 ]または手動[]を使用して、次の画面を事前にロードを開始できます。

レイジーローディングイメージ

画像を頻繁にモバイルアプリ内の最も重いアセットです。レイジーローディングイメージは、ビューポートの近くにあるまでダウンロードを推測することを意味します。 のようなライブラリを使用してこれを実現できます。 実際のソリューションでは、または]]expo-image]]を使用します。 どちらのどちらが、箱からレイジーローディングとキャッシュをサポートしているかを見ることができます。 カスタムソリューションの場合は、[FLT:[FLT:]または[FLT:]]を使用します。 [FLT:[FLT]] [FLT]]] [FLT]]]] [FLT]]]] [FLT]]] [FLT]] [FLT] [FLT] [FLT]] [FLT] [FLT] [FLT]]] [F] [F] [FLT] [FLT] [F] [F] [F] [F] [F] [F] [[F] [F] [F] [F] [FLT] [F] [FLT] [F] [F] [FLT]

FlatList で、可視線のみをレイジーロードする例:

[]]

このアプローチは、表示されたウィンドウ内の項目のみがレンダリングされ、さらに項目が仮想化されていることを保証します。

React.lazy および React のナビゲーション・画面と分裂するコード

大型アプリでは、React ナビゲーションの 機能と組み合わせて React.lazy を使用して、画面ごとに JavaScript バンドルを分割することもできます。ただし、React Navigation v6 はコンポーネントを直接使用しているため、上記に示すようにレイジーでラップできます。

React ネイティブでレイジーローディングに最適なプラクティス

  • [] 遅延負荷[ - 重いコンポーネントを見つけるためにあなたのアプリをプロファイルします。 通常、これらは、チャート、マップ、ビデオプレーヤー、複雑なフォーム、およびユーザーがほとんど訪問をスクリーニングします。
  • 意味のあるフォールバック[]を提供します。 - skeleton画面、シマー効果、またはアクティビティインジケータを使用して、ユーザーが何かが起こっていることを知っている。
  • []キャッシュ[]と組み合わせて – コンポーネントが読み込まれると、状態管理(例えば、Recoil、Recoil)または[)を使用してメモリに保持することを検討してください。
  • []レイジーローディングバイアルコンポーネント[ - 動的インポートとサスペンスのオーバーヘッドは、非常に小さなコンポーネント(例えば、単一の[)のための利点を上回ることができます。
  • [] デバイスで低エンドデバイス[のテスト – パフォーマンスゲインは、限られたRAMと低速CPUでデバイスに最も顕著です。 これらの条件をエミュレートします。
  • [] メトロのインラインに必要[を使用する - 動的インポートを使用できない古いプロジェクトの場合、メトロは]とモジュールの読み込みを延期するために、メトロの構成でサポートします。 これは低レベルのアプローチですが、効果的です。

一般的な落札とテムを避ける方法

1. 積み過ぎの怠惰

レイジーローディングは、すべてのコンポーネントが、あまりにも多くのロードスピナーでジャンプユーザーエクスペリエンスにつながることができます。 スクリーンと高価なコンポーネントのみに焦点を当てます。

2. 移行中にレイジーローディング

ユーザーがスタックまたはタブ遷移を介して移動する画面を怠ると、ロード状態は、jarring遅延を引き起こす可能性があります。 以前の画面がマウントされるか、ユーザーがボタンを上回るときに、プレッチャを検討してください。

3. エラー処理を行わない

動的インポートはネットワークの問題やバンドルの破損が原因で失敗することができます。 Suspenseフォールバックのエラーをキャッチするには、[を使用します。

[]]

4. プラットフォーム全体で一貫性のある行動

iOSとAndroidは、それぞれ[を扱います。両方のプラットフォームで常にテストします。

性能測定と監視

レイジーローディングをデプロイする前に、ベースラインメトリックをのようなツールを使用して設定します。 リアクトネイティブパフォーマンスモニター] (開発者メニューから利用可能)、 ]Flipper]、または[]React DevTools]])。 トラッキング:

  • 初期レンダー(TTIR)への時間
  • インタラクティブな時間 (TTI)
  • 怠惰なローディングの前そして後の記憶使用法
  • チャンクごとの束のサイズ

実装後、改善を定量化するために再測定します。多くの現実世界React Nativeアプリ(])では、40%を超えるとレイジーローディングの起動時間を削減しました。

外部リソースおよびさらなる読書

コンテンツ

レイジーローディングはシルバー弾丸ではありませんが、正しく適用されたとき、React Native 開発者のパフォーマンスツールキットで最も強力なツールの1つです。非必須コンポーネント、画像、およびスクリーンの読み込みを延ばすことにより、初期のロード時間を劇的に削減し、メモリの負荷を削減し、ユーザーにシルクのようなエクスペリエンスを提供することができます。 重い犯罪者からあなたのアプリで始めると、スプラッシュスクリーン、複雑なチャート、またはまれに訪問されたタブが、徐々に他のコンポーネントを拡張し、Reacter は、より迅速に機能します。