ガイド · 03
パフォーマンス
Web のコンポーネントのコストをこのビルドで計測した結果と、その数値の再現方法。
計測値
2026-09-28 に Chrome 153.0.8010.52 (headless, Playwright) で計測しました。ブラウザーでの各数値は 3 回の実行のうち最大のものです。
| 項目 | 計測方法 | 結果 |
|---|---|---|
| パッケージサイズ | Web のエントリー全体(16 のエクスポートすべて)を esbuild でバンドル・minify し、React は外部化、gzip レベル 9 | 28.0 KB(minify 後 84.3 KB) |
| コンポーネント 1 つ | MotionNumber だけを import、バンドル方法は同じ | 18.6 KB |
| JS フレームコールバック | MotionNumber、MotionHeight、MotionHighlight が同時に変わる 1.2 秒間に、ページで呼ばれた requestAnimationFrame の回数(12 個のアニメーションが実行中) | 0 |
| 変更ごとの React コミット | MotionNumber を囲む Profiler のコミット数。10 回の値の変更を、それぞれ完了するまで待って計測 | 10 回の変更で 10 |
| ストリーミング | 一度に届いた 3000 文字を MotionStream が表示する間(約 4081 ms)の Profiler のコミット数 | 11 |
| 中断 | 5 ms 間隔で 200 回新しい値を与えてから待機: ページに残ったアニメーションの数と、最後のテキストが正確かどうか | 残り 0、テキストは正確 |
2026-09-28 · @kkwaenggwari/animated-chorus@0.1.0 · Chrome 153.0.8010.52 (headless, Playwright) · Windows_NT 10.0.22631 · Intel(R) Core(TM) i7-14700K
速さの理由
4 つの設計上の選択がコストを低く抑えています。
- Web ではアニメーションライブラリーを使いません。モーションはブラウザーの Web Animations API に任せ、スプリングは解析的にサンプリングします。
- フレームごとの React レンダリングはありません。コンポーネントがレンダリングされるのはデータが変わったときで、動いている間ではありません。
- ストリーミングテキストはページに直接追加され、React の state へ反映するのは 1 秒に数回だけです。
- どのコンポーネントも単体で動きます。ツリーを再レンダリングする Provider も、グローバルなストアもありません。
制限
MotionStream はテキストを表示している間、アニメーションフレームのループを使います。毎フレーム処理が必要なのはこのコンポーネントだけです。React Native では、幅と高さの変化はレイアウトなので JS ドライバーで動きます。計測値は 1 台のマシンと 1 つのブラウザーでのものなので、あなたの環境の数値は異なります。
再現する
数値は Web サイトのリポジトリーにあるスクリプトで得たものです。パッケージをバンドルし、インストール済みの Chrome をウィンドウなしで開き、すべてのシナリオを 3 回ずつ実行して、このページが読む結果を書き出します。
node scripts/measure-chorus.mjs