建立生產建置

npm run build 會建立一個生產建置應用程式 build 目錄。在 build/static 目錄裡頭是您的 JavaScript 與 CSS 檔案。build/static 裡頭的每個檔案名稱都會包含檔案內容的獨特雜湊。檔案名稱中的雜湊能啟用 長期的快取技巧。

在執行剛建立的 Create React App 應用程式的生產建置時，會產生許多 .js 檔案（稱為 區塊），並放置在 build/static/js 目錄中

main.[雜湊].chunk.js

• 這是您的應用程式程式碼。App.js 等。

[數字].[雜湊].chunk.js

• 這些檔案可能是 vendor 程式碼，或是 程式碼拆分區塊。vendor 程式碼包含從 node_modules 中匯入的模組。拆分您的 vendor 與 應用程式 程式碼的可能優勢之一，就是能啟用 長期的快取技巧 以改善應用程式載入效能。由於 vendor 程式碼比實際的應用程式程式碼更不常變動，所以瀏覽器就能個別快取它們，而且不會在應用程式程式碼變動時每次都重新下載它們。

runtime-main.[雜湊].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 檔案快取一年。請注意，您可以安全地對 build/static 使用一年期滿的到期時間，原因是檔案內容雜湊已嵌入到檔案名稱中。

剖析

針對 v16.5 以上版本，ReactDOM 在開發模式下自動支援剖析。但由於剖析會增加一些額外的負擔，因此在製作模式中為選用功能。您可以使用 --profile 旗標選用此功能。使用 npm run build -- --profile 或 yarn build --profile 來在製作建置中啟用剖析。請參閱 React 文件，瞭解使用 React DevTools 執行剖析的詳細資料。