React Native

【ReactNative・Android】Hermesでパフォーマンス向上

React Native
この記事は約2分で読めます。
183 :731こと電車男 :04/03/16 22:47
    俺もエルメスが高級ブランドだってことは知ってたけど
    JavaScriptエンジンまで作ってるとは知らなかったよ…_| ̄|○ 

TL;DR

Hermesを使用することで、Androidビルドの

  • アプリ起動時間の高速化
  • メモリ使用量の大幅な削減

が可能。

👇スピードアップ。


Hermesとは

ReactNative用のJSエンジン。

ビルド時にJavaScriptをバイトコードにプリコンパイルすることで、実行時のタスクを減らし、起動時間の高速化やメモリ使用量の削減を実現している。

通常、JavaScriptは実行時に解析されるため、あらかじめこれをビルド時に行うことで高速化できる。

メモリ使用が削減できれば、デバイスによる強制終了の可能性もへり、ひいては利用時間やUXの向上も見込まれる。

Hermesの有効化

公式ドキュメントに従う。
https://reactnative.dev/docs/hermes

android/app/build.gradle


project.ext.react = [
  entryFile: "index.js",
- enableHermes: false  // clean and rebuild if changing
+ enableHermes: true  // clean and rebuild if changing
]

ビルドファイルを一旦クリーン

$ cd android && ./gradlew clean

起動(デバッグビルドでは、これまで通りのビルドが採用されるので、ホットリロードの速度には影響がない)

$ npx react-native run-android

リリースビルドで起動

Hermesが有効になったビルドで起動する。

$ npx react-native run-android --variant release

iOSは変わらない

iOS では、Safariにも使用されるエンジンが使用されるため、Hermesは使用できない。
(ただし、RN開発者ならわかる通りiOSはすでに最適化されているので動作は比較的軽快)

相性の悪いライブラリもあるので注意

Hermesがサポートしていない構文や機能を使用しているライブラリと噛み合わない場合もあるので、注意も必要。