プロダクションビルドの作成

npm run build コマンドを実行すると、アプリのプロダクションビルドを含む build ディレクトリが作成されます。build/static ディレクトリ内には、JavaScriptファイルとCSSファイルが格納されます。build/static 内の各ファイル名には、ファイル内容の一意のハッシュが含まれています。ファイル名にこのハッシュを含めることで、長期的なキャッシュ技術が可能になります。

新しく作成したCreate React Appアプリケーションのプロダクションビルドを実行すると、多数の .js ファイル（チャンクと呼ばれます）が生成され、build/static/js ディレクトリに配置されます。

main.[hash].chunk.js

• これは、あなたのアプリケーションコードです。App.jsなどです。

[number].[hash].chunk.js

• これらのファイルは、ベンダーコード、またはコード分割チャンクのいずれかになります。ベンダーコードには、node_modules 内からインポートしたモジュールが含まれます。ベンダーコードとアプリケーションコードを分割することの潜在的な利点の1つは、アプリケーションのロードパフォーマンスを向上させるために長期的なキャッシュ技術を有効にすることです。ベンダーコードは実際のアプリケーションコードよりも変更される頻度が少ない傾向があるため、ブラウザはそれらを個別にキャッシュでき、アプリコードが変更されるたびに再ダウンロードする必要がありません。

runtime-main.[hash].js

• これは、アプリケーションのロードと実行に使用されるwebpackランタイムロジックの小さなチャンクです。これにより、追加のネットワークリクエストを節約するために、この内容はデフォルトで build/index.html ファイルに埋め込まれます。 高度な設定 に記載されているように、INLINE_RUNTIME_CHUNK=false を指定することで、これを使用しないように選択できます。これにより、index.html に埋め込まれる代わりに、このチャンクがロードされます。

コード分割を使用してアプリケーションを分割している場合は、build/staticフォルダーに追加のチャンクが作成されます。

静的ファイルキャッシュ

build/static ディレクトリ内の各ファイルには、ファイルの内容に基づいて生成された一意のハッシュがファイル名に追加されるため、積極的なキャッシュ技術を使用して、ファイルの内容が変更されていない場合、ブラウザがアセットを再ダウンロードするのを防ぐことができます。後続のビルドでファイルの内容が変更された場合、生成されるファイル名のハッシュは異なります。

ユーザーに最高のパフォーマンスを提供するには、index.html と build/static 内のファイルに対して Cache-Control ヘッダーを指定するのが最善です。このヘッダーを使用すると、ブラウザやCDNが静的アセットをキャッシュする期間を制御できます。 Cache-Control の動作に慣れていない場合は、この記事で素晴らしい入門記事をご覧ください。

build/static アセットには Cache-Control: max-age=31536000 を使用し、それ以外には Cache-Control: no-cache を使用することは、ユーザーのブラウザーが常に更新された index.html ファイルをチェックし、すべての build/static ファイルを1年間キャッシュすることを保証する安全で効果的な開始点です。ファイルの内容ハッシュがファイル名に埋め込まれているため、build/static で1年の有効期限を安全に使用できることに注意してください。

プロファイリング

ReactDOMは、v16.5以降の開発モードでプロファイリングを自動的にサポートしていますが、プロファイリングはわずかなオーバーヘッドを追加するため、本番モードではオプトインになっています。--profile フラグを使用することで、オプトインできます。本番ビルドでプロファイリングを有効にするには、npm run build -- --profile または yarn build --profile を使用します。 React DevToolsを使用したプロファイリングの詳細については、Reactドキュメントを参照してください。