Vue 3 のプロビジョニング/インジェクションのパフォーマンスはどの程度ですか?

Question

私は、グローバルな状態管理のためにアプリケーション レベルの provide に依存するプロジェクトに取り組んでいます。最初、provided オブジェクトは小さかったですが、プロジェクトが成長するにつれて大きくなりました。

データが必要な場所にこのオブジェクトを挿入すると、アプリケーションのパフォーマンスにどの程度影響しますか? Pinia のようなグローバル状態管理ツールを実装せずに、提供する大きなオブジェクトを個別のオブジェクトに分割して、必要な場所にデータの「チャンク」を提供する価値はあるでしょうか?

Answer 1

基本的なベンチマークをいくつか行ったところ、頻繁に使用される変数を提供/挿入する必要があるのか​​、それとも多数のコンポーネントの Pinia ストアからアクセスする必要があるのか​​疑問に思っていました。

結果は、パフォーマンスに大きな違いがないことを示しています。

最初のテスト ケースは非常に基本的なものです。 単一の bool を提供/注入することは、コンポーネントの Pinia ストレージから取得してコンポーネントを複数回レンダリングすることと同じではありません。 50k コンポーネントのレンダリングには、provide/inject と Pinia を使用して 20 ～ 24 秒かかりました。どちらが速い/遅いと言う一貫した違いはありません。

2 番目のテストでは、より大きなオブジェクト、つまり約 1MiB のデータの配列 (スペースを含まない JSON 出力で測定) を使用しました。違いも顕著ではありません。 50,000 個のコンポーネントをレンダリングしましたが、インジェクションとストレージ アクセスの両方を使用した場合、どちらも 19 ～ 26 秒のほぼ同じ時間がかかりました。

いずれの場合もコンポーネントはテーマ変数のブール値をレンダリングするため、データが大きい場合でもブール値が小さい場合でもレンダリング時間は増加しません。

結局のところ、provide/inject と Pinia ストアの間には実際には意味のある違いはないという結論に達しました。唯一の明らかな違いは、データが大きいほどパフォーマンスの安定性が低くなり、データが小さいほど予測しやすくなるということです。ブール値のテストを何度繰り返しても、時間は常に 20 ～ 24 秒の間であり、データが増加するにつれて、19 秒や 26 秒などの外れ値が発生します。これも一貫したものではありません。これは実際の CPU 使用率の変動である可能性があり、Provide/inject と Pinia ストアの使用率とは何の関係もありません。

vue@3.2.47 と pinia@2.0.32 を使用して、macOS 上の Chrome v110 (x86_64) でテストしました。

使用したテストコード:

リーリー リーリー リーリー