🗂

ExpoのHermesでビルドしてみた

2021/12/04に公開

昨日は 3 日目、Yoshifujiさんの社内で技術書の輪読会を開催している話でした!
輪読会は自分も参加してみて、とても良い取り組みだと思います!

挨拶

4 日目(ギリギリ)は、nano72mknです。お願いします!

今回は、やってみた系(?)です。
Expo SDK43 の Highlights に Hermes が iOS でも使えるようになったと記載があり、気になっていたのでこの機会にすこし触れてみます!

そもそも、Hermes ってなーに?

ReactNative 用に最適化されたオープンソースの JavaScript エンジンです。
Hermes を有効にすると、起動時間が改善され、メモリ使用量が減少し、アプリのサイズが小さくなります。
Using Hermesより

アプリサイズが軽くなって起動が早くなると...
なるほどなるほど。

Expo SDK 42で Android、Expo SDK 43で ios も使用できるようです。

Expo SDK 43

Hermes for iOS is not available in Expo Go or in standalone apps built with expo build.

とあるので、ビルド後のアプリサイズ/起動速度もみてみたいですね!

やってみたいこと

  • Hermes を使ってビルドしてみる
  • ビルド後のアプリサイズ確認
  • 起動速度

実際に使ってみる!

expo init

$ expo init example-hermes

SDK 確認

iOS でHermesが使えるのが SDK43 からなので、一応確認

package.json
{
  ...
  "expo": "~43.0.2",
  ...
}

問題なさそう

セットアップをする

公式の手順に沿ってセットアップしていく
Using Hermes Engine - iOS setup

app.json
{
  "expo": {
    ...
    "jsEngine": "hermes",
    ...
  }
}

ビルドをする

eas build が無料アカウントでも使えるようになったの本当に嬉しいですね!

設定ファイルを生成...

$ eas build:configure

app.json/eas.jsonが生成される

ビルドする

$ eas build --platform all --profile=preview

少し待てば、apk/ipa がダウンロードできるサイトへの URL と共に、
実機にアプリをインストールできる QR が表示されるので、カメラで読み取ってインストール。

(Expo が提供してくれる機能のおかげで記事書くの間に合いそう。)

検証

ファイルサイズ

Hermes true false
android(apk) 26MB 50.4MB
ios(ipa,adhoc) 5.5MB 4.2MB

android は Hermes をつけたら約 24MB 減りました。

iOS はなぜか、Hermes をつけると 1.3MB 増える結果になりました。
iOS はそもそものアプリサイズが小さいのでそこで差が出たのでしょうか?
アプリのサイズが大きくなるとまた結果が変わりそうな気もします。

起動速度

expo initしただけの最小限構成のため速度変わらず。
おそらくというか、確定で作り込まれたアプリになると差が出てくるところでしょう.
いずれ、確認できるタイミングが来たら検証してみたいです!

さいごに

Expo を使って Hermes を軽くみてみました。
アプリが小さいため Hermes の効果を実感することはできませんでしたが、
設定ファイルにちょろっと追記するだけで導入できるので、既存のアプリで導入できるチャンスがあれば起動速度やアプリサイズの検証もしてみたいですね!

Hermes 気になってるアプリエンジニアの皆さん!
ちょっと試してみると面白いと思いますよ!

感想も聞いてみたい!

参考リンク集

GitHubで編集を提案
スタフェステックブログ

Discussion