.png){kind=small}
こんにちは。hakemaruです。
複業クラウドのアプリはReact Nativeで開発しています。
Androidアプリのパフォーマンスが悪いことが課題の一つとして上がっており、HermesというJavaScriptエンジンを導入することで改善を行いました。
Hermesとは
Meta(旧Facebook)が開発しているReactNative用に最適化されたオープンソースのJavaScriptエンジン。
Hermesを有効にすると、起動時間が改善され、メモリ使用量が減少し、アプリのサイズが小さくなります。
ref：Using Hermes
仕組み
バイトコードの事前コンパイル
通常のJavaScriptエンジンは、JavaScriptソースがロードされた後に解析し、バイトコードを生成しますが、HermesはJavaScriptを事前コンパイルによりバイトコードを生成しています。
また、実行時にJavaScriptをパースしてバイトコードを生成するというステップが省略できることによる起動時間の短縮を実現しています。
ref：Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native
Hermesについて
Android：ReactNative 0.60.4以上
iOS：React Native 0.64以上
expoを利用している場合
Android：SDK42以上
iOS：SDK43以上（SDK43では実験的サポートになっているので注意）
また、expo buildではなくeas buildを使用する必要があります。
（eas buildを利用することでnative層の変更も可能になるため）
expo buildの利用は2023年までと発表があったので、どこかのタイミングで切り替えていく必要があります。
ref：expo build’s Final Year
導入
基本的にドキュメントに沿って実装すれば大丈夫でした。
実際に導入で詰まる点はありませんでした。
また、リロードを高速に保つために、デバッグビルドは事前コンパイルを使用していません。
なので導入したからと言って開発体験が悪くなるといった問題も今の所はないです。
ref：
素のReactNative
expo
導入結果
初期起動時間の減少
約6秒程度から3秒程度に(端末によって異なる場合あり)
→起動からhome画面に遷移するまでの時間を計測
アプリサイズ減少
デバイス上のアプリサイズが約8MB減少
48MB→40MB
全体的にパフォーマンスが向上
メモリの使用率が減ったことにより、全体的にパフォーマンスが向上
最後に
仕組みや開発背景についてはMeta公式のブログに詳しく書かれているので興味のある方は以下をみてください。
ref：Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native
Share this post