自己紹介

株式会社Another worksでエンジニアインターンをしている@hakeと申します。
主にTypescriptとReactNativeでクロスプラットフォーム開発をしております。

経緯

弊社ではAndroidアプリのパフォーマンスが悪いことが課題の一つとして上がっていました。
ReactNative開発ではあるあるだと思っています。
そこで今回、HermesというJavaScriptエンジンを導入することで改善を図りました。

Hermesとは

Meta(旧Facebook)が開発しているReactNative用に最適化されたオープンソースのJavaScriptエンジン。
Hermesを有効にすると、起動時間が改善され、メモリ使用量が減少し、アプリのサイズが小さくなります。
いいことづくしですね！

参考
https://reactnative.dev/docs/hermes

仕組み

バイトコードの事前コンパイル

通常のJavaScriptエンジンは、JavaScriptソースがロードされた後に解析し、バイトコードを生成しますが、HermesはJavaScriptを事前コンパイルによりバイトコードを生成しています。
また、実行時にJavaScriptをパースしてバイトコードを生成するというステップが省略できることによる起動時間の短縮を実現しています。

下記の図がとてもわかりやすかったです。

通常のJavascriptエンジン

parseとconpileがRun timeに行われます。

Hermes

ParseとCompileがビルド時に行われる

その他にもJITコンパイラの廃止やガベージコレクタの最適化などを行っているらしいです。

詳しく知りたい方は下記を読んでみてください！

参考
https://engineering.fb.com/2019/07/12/android/hermes/

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年までと発表があったので、どこかのタイミングで切り替えていく必要があります。
https://blog.expo.dev/turtle-goes-out-to-sea-d334db2a6b60

導入

基本的にドキュメントに沿って実装すれば大丈夫でした。
実際に導入で詰まる点はありませんでした。

また、リロードを高速に保つために、デバッグビルドは事前コンパイルを使用していません。
なので導入したからと言って開発体験が悪くなるといった問題も今の所はないです。

ReactNative
https://reactnative.dev/docs/hermes

expoを利用している場合
https://docs.expo.dev/guides/using-hermes/

導入結果

初期起動時間の減少

約6秒程度から3秒程度に(端末によって異なる場合あり)
→起動からhome画面に遷移するまでの時間を計測

アプリサイズ減少

デバイス上のアプリサイズが約8MB減少
48MB→40MB

全体的にパフォーマンスが向上

メモリの使用率が減ったことにより、全体的にパフォーマンスが向上

最後に

仕組みや開発背景についてはMeta公式のブログに詳しく書かれているので興味のある方はぜひ見てください。
https://engineering.fb.com/2019/07/12/android/hermes/

▼複業でスキルを活かしてみませんか？複業クラウドの登録はこちら！
https://talent.aw-anotherworks.com/