Reactを使ってブログサイトを作る 11 - プロジェクトのビルドと最適化

プロジェクトのビルド

1. プロジェクトのビルド

• ビルドとは、プロジェクト内のソースコードとリソースファイルを処理し、プロダクション環境で実行できる静的ファイルを生成するプロセスです。
• ビルドコマンド：npm run build
• buildディレクトリが生成されます。

2. ローカルプレビュー（ローカルサーバーでプロジェクトを実行）

• ローカルプレビューとは、ローカルで静的サーバーを使ってプロダクションサーバーを模擬し、プロジェクトを実行するプロセスです。
• 1. ローカルサーバーパッケージをインストール： npm i -g serve
• 1. ローカルサーバーを実行： serve -s build
• 1. ブラウザでアクセス： http://localhost:3000/

ビルドの最適化

1. ルートの遅延読み込み（Lazy Loading）の設定

• ルートの遅延読み込みとは？

  • ルートのリソースは、実際にアクセスされたときにのみ動的に取得されるもので、プロジェクトの初回読み込み時間を最適化することが目的です。

• どうやって設定する？

  • 1. ルートをReactが提供するlazy関数を使って動的インポートに変更します。
  • 1. React内蔵のSuspenseコンポーネントで、ルートのelementオプションに対応するコンポーネントをラップします。

  

2. ビルドサイズ分析

ビジネスの背景

• ビルドサイズを分析することで、プロジェクト内のどの部分がサイズが大きいかを把握し、最適化すべきパッケージを特定することができます。

使用手順

• ビルドサイズを分析するパッケージをインストール： npm i source-map-explorer
• package.jsonのscriptsタグに、ビルドサイズ分析コマンドを追加します。
  • プロジェクトをビルド： npm run build（すでにビルド済みの場合は省略可）
• 分析コマンドを実行： npm run analyze
• ブラウザで開いたページで、グラフ内のパッケージのサイズを分析します。

3. CDNの設定

CDNとは？

• CDN（Content Delivery Network）は、コンテンツ配信ネットワークサービスで、ユーザーがウェブサイトのコンテンツをリクエストしたとき、最寄りのサーバーからキャッシュされたリソースをユーザーに提供します。

どのリソースをCDNサーバーに置くか？

• サイズが大きい、業務外のファイル（例：react、react-dom）
  • 1. サイズが大きく、CDNのブラウザキャッシュ機能を利用して読み込み時間を短縮できるファイル。
  • 1. 業務外のファイルで、頻繁に変更されないもの。CDNは頻繁にキャッシュを更新しなくてよいため。

プロジェクトでの実装方法

• 1. CDNでキャッシュする必要のあるファイル（例：react、react-dom）をビルドから除外します。
• 1. CDNの方法で、リソース（例：react、react-dom）を再度インポートします。