yn2011's blog

技術メモ

React Native (Expo) で開発した iOS / Android アプリの起動時間を計測する

Expo iOS Android

前提

  • Expo SDK 45
  • react-native-startup-time v2.0.0

結論

react-native-startup-time を利用した。

import { getTimeSinceStartup } from 'react-native-startup-time';

// 省略...

export const Screen: React.FC = () => {
  const [launchTime, setLaunchTime] = React.useState(0);

  useEffect(() => {
    getTimeSinceStartup().then((time) => {
      setLaunchTime(time);
    });

  }, []);

  return (
        <Body>アプリ起動からコンポーネント表示までの時間：{launchTime / 1000} 秒</Body>
  );
};

起動時間の定義(計算式）

react-native-startup-time の iOS / Android それぞれの実装を確認すると、以下の計算で起動時間を算出していることが分かった。

getTimeSinceStartup実行時の時刻 - アプリ起動直後の初期化における時刻

実装に興味のある方はこちらを参照

なぜ react-native-startup-time を使ったか

React Native で開発したアプリの起動時間を計測する方法は大きく分けると、①ライブラリを利用する方法と、②XCode / Android Studio を利用する方法がある。

今回は Expo の Managed Workflow を使用しており、②の方法で計測するには毎回 eject しなくてはいけなかったので①のライブラリを利用する方法を選択した。Expo の development Client を使用して開発している場合は、ライブラリで起動時間を計測できるようにしておけば JavaScript の変更の度に再ビルドする必要がないのも嬉しい。

逆にライブラリを使うデメリットとしてはプロファイルが取得できない点が挙げられる。これは②のツールを使用する必要があるので注意が必要。

ライブラリを使う場合、react-native-startup-time の他に react-native-perf-logger でも起動時間が計測できそうだったが、ライブラリを利用すると EAS Build で Android のビルドに失敗してしまったので選択できなかった。react-native-startup-time でやりたいことはできているので、まあこっちでいいかーという感じで最終的に react-native-startup-time を使うことにした。