React Native 0.70 の Hermes エンジンに期待されること

React Native 0.70 の Hermes エンジンに期待されること
あなたのような読者は、MUO のサポートを支援します。当サイトのリンクを使用して購入すると、アフィリエイト手数料が発生する場合があります。

React Native 0.70 がリリースされ、Hermes がこのアップデートで出荷される新しいデフォルトの JavaScript エンジンです。 Hermes に期待されることと、React Native アプリケーションのパフォーマンスに影響を与えるいくつかの機能を以下に示します。





エルメスとは？

Hermes は、JavaScript コードを効率的なバイトコードにプリコンパイルし、アプリケーションのメモリ使用量を削減することで、iOS および Android アプリケーションの起動時のパフォーマンスを最適化するオープンソースの JavaScript エンジンです。



今日のメイク動画

Hermes をサポートするための古い React Native バージョンの更新

0.70 で実行されている React Native アプリケーションでは、デフォルトで Hermes が有効になります。古い React Native アプリケーションの場合、Hermes ビルドには、Android ビルド用のバージョン 0.60.4 および iOS 用のバージョン 0.64.0 から始まるすべての React Native バージョンが付属しています。バージョンが一致すると、React Native アプリケーションで依存関係の不一致が発生するリスクがなくなります。





これらの古いバージョンの React Native で Hermes を有効にするには、Android と iOS の両方のアプリケーションに構成を追加する必要があります。

Android では、 アンドロイド/アプリ/build.gradle ファイル：



外付けハードドライブMacに最適なフォーマット 
project.ext.react = [ 
    entryFile: "index.js", 
    enableHermes: true  // clean and rebuild if changing 
]

iOS では、次の変更を iOS/ポッドファイル :

use_react_native!( 
    :path => config[:reactNativePath], 
    :hermes_enabled => true 
)

iOS では、設定を構成した後に Hermes ポッドをインストールする必要があります。



次のコマンドを実行して、ポッドをインストールします。

cd ios && pod install

Expo で Hermes を有効にする

また、Expo を使用してビルドまたは実行する React Native アプリケーションに Hermes エンジンを使用することもできます。 Expo ライブラリは、Android の SDK バージョン 42 および iOS の SDK バージョン 43 から現在のバージョン 0.70 までの Hermes をサポートします。 Expo Application Services Build を使用してビルドしない限り、スタンドアロン アプリケーションは Hermes を実行できないことに注意することが重要です。



React Native アプリケーションで Hermes を有効にするには、 app.json ファイル：

{ 
  "expo": { 
    "jsEngine": "hermes" 
  } 
}

これで、Expo Application Services で構築されたアプリケーションの JavaScript エンジンとして Hermes が有効になります。

React Native アプリの Hermes パフォーマンス最適化

ほとんどの JavaScript エンジンは、JIT (ジャスト イン タイム) コンパイル システムを使用してすべての JavaScript ソース コードを解析します。 JIT システムでは、コンパイル プロセス全体が完了するまでデバイスが待機する必要があるため、実行速度が低下します。 Hermes は事前コンパイル (AOT) アプローチを使用して、負荷の高い JavaScript エンジンの作業のほとんどをビルド時間に移します。

Hermes は主に、アプリケーションのパフォーマンスの 3 つのメトリックに影響を与えます。それは、アプリケーションの TTI (Time to Interactive)、バイナリ サイズ、およびメモリ使用量です。

インタラクティブになるまでの時間

TTI は、アプリが読み込み、スクロールや入力などのユーザー操作をサポートするのにかかる時間です。 Hermes は、他の JavaScript エンジンと比較して、React Native アプリケーションの平均 TTI を改善します。

この TTI の削減は、Hermes が JIT コンパイラを実行しないためです。

バイナリ サイズ

バイナリ サイズは、バンドルされている React Native アプリケーションのサイズです。 Android アプリケーションは、 APKファイル形式 、iOS アプリは Apple が IPA と呼ぶ形式を使用します。 Hermes を使用すると、Android デバイスのアプリケーション サイズが大幅に縮小されます。

テレビのドット抜けを修正する方法

メモリ使用量

メモリ使用量は、アプリケーションを最適化するためのもう 1 つの重要な指標です。アプリケーションが大量のメモリを使用すると、アプリケーションのユーザー エクスペリエンスに悪影響が及びます。 Hermes は、必要に応じてメモリ使用量を調整するガベージ コレクタ システムを実装しており、実行中にアプリケーションが必要なメモリ領域のみを使用するようにします。

Hermes と Chrome DevTools を使用した React Native のデバッグ

Hermes には、Expo を使用してエミュレーター、シミュレーター、または物理デバイスで実行されている React Native アプリケーションをデバッグするための新しいエクスペリエンスが付属しています。 Hermes は、Chrome DevTools の Inspector Protocol を使用した React Native アプリケーションのデバッグをサポートしています。これを伝統的なものと混同してはいけません ブラウザのコンソールを使用した JavaScript のデバッグ .

Hermes アプリケーションをデバッグするように Chrome を構成するには、次の手順に従います。

  1. 案内する chrome://inspect Chromeブラウザ内。
  2. クリックしてください 構成、設定 ボタン。
  3. 画面上のモーダル内で、React Native アプリケーションを実行しているメトロ バンドラーのサーバー アドレスを入力し、 終わり .

Hermes ターゲット検査リンクを使用して、React Native アプリケーションをデバッグできるようになりました。

Hermes が React Native のみに最適化されている理由

React Native JavaScript エンジンとしての Hermes の最適なパフォーマンスは、ランタイム環境に部分的に依存しています。 React Native では、すべての JavaScript コードをアプリケーション環境内にバンドルします。このシステムにより、バイトコードの出荷が効率的になります。

考慮すべきもう 1 つの要因は、JavaScript のコンパイル中に行われる作業量です。 Hermes は、積極的なバイトコードの最適化を回避しながら、モバイル アプリケーションで予想される頻繁なユーザー インタラクションを管理します。 JIT コンパイラーの JavaScript エンジンは、この方法ではタスクを実行しません。