パフォーマンス改善

Reactを使ったアプリのパフォーマンス改善法

【前提】
この改善方法はあくまで「事例」であって 最適解ではない
アプリや環境によって有効な手法は変わる

【内容】
１．視聴中のパフォーマンス改善（ランタイム、画面描画の速さ）
２．ページロードのパフォーマンス改善（ページを開くまでの速さ）

1. 視聴中のパフォーマンス改善（概要）

これは ページが表示された後の動きを速くするための改善です。
例として次のような問題/改善例が扱われています：

✔️ 無駄な DOM の再描画
✔️ フルスクリーン時の描画負荷
✔️ 不必要に再生成される関数や描画処理の削減
✔️ 動かない不要な処理の停止
✔️ リストの描画の最適化（再レンダリングの削減）

これらは ユーザーの操作感（スクロール、クリックなど）をスムーズにするための改善です。

2. ページロードのパフォーマンス改善（イントロ〜ファイルサイズまで）

ページロードでは URL にアクセスしてからページが表示されるまでの時間を短くすることがテーマになります。
ここでのポイントの1つが ファイルサイズを減らすこと です。

ページロード改善：ファイルサイズを減らす（要点）

なぜファイルサイズが重要か？

ページを表示する際に JavaScript や CSS などのファイルを読み込みます。
これらのサイズが大きいほど ダウンロード・パース・実行が遅くなるため、ページ表示速度が落ちます。
特に JavaScript はパース/コンパイルコストも高いため、単純なバイト数以上の影響が出ます。

具体的な改善アプローチ

① バンドル（bundle）の分析
Webpack などで生成されたバンドルを分析して どの部分がどれだけのサイズになっているか可視化します。
これにより、不要なライブラリや重い依存を発見できる。

使用するツール例：
✔️ bundlephobia — ライブラリ単位で圧縮後のサイズを見る
✔️ webpack-bundle-analyzer — 実際のバンドル内のサイズ構成を可視化する
✔️ bundlesize や size-plugin — CI（PR 時）でファイルサイズの変化をチェックする 

これらを使うことで 無駄なコード・依存が含まれていないかを早めに気づける仕組み作りができます。

② 初期表示に不要なものを遅延ロード（lazy load）
初期表示で必要ない JavaScript / CSS は最初に読み込まないことで、ファーストビューのロード時間を短縮します。

具体的には：
✔️ <script async defer …> の活用
✔️ セクションに応じて動的にスクリプトを読み込む仕組みを作る（React コンポーネントとして動的ロードなど）

③ コード分割（Code Splitting）
Webpack の「コード分割（Code Splitting）」で、初期ロードに必要な部分とそれ以外を 別ファイルに分けることで主要ロードのサイズを減らせます。
特に「ユーザー向けページ」と「管理者向けページ」で共通のコードがあっても、全てを一つのバンドルに含めるのは無駄です。
適切な分割を行うことで ユーザーの初回体験速度がアップします。

比較や検出の仕組みづくり

類似サービスとファイルサイズを比較して 問題点を見つける
CI や PR 時にサイズチェックを入れて 増えすぎていないか監視する
こういった仕組みで “気づき” を早くします。

まとめ：ファイルサイズを減らすまでの流れ

バンドルを分析して何が重いか把握する
不要なライブラリや依存を取り除く
初期ロード不要なコードを遅延読み込みする
コード分割を活用して必要最低限だけ最初に読み込む
CI などでサイズ増加を監視して品質を保つ

この流れは ページロード性能を改善してユーザー体感を良くするための基本戦略 となります。