🗂

ExpoのHermesでビルドしてみた

shota1995m2021/12/04に公開

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

挨拶

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

今回は、やってみた系(?)です。
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

ログインするとコメントできます