创建生产环境构建

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 中导入的模块。将供应商代码和应用程序代码分开的一个潜在优势是，它可以使 长期缓存技术 成为可能，从而提高应用程序加载性能。由于供应商代码的变化频率往往低于实际的应用程序代码，因此浏览器可以单独缓存它们，并且不会在应用程序代码每次更改时重新下载它们。

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 文件一年。请注意，您可以安全地对 build/static 使用一年的过期时间，因为文件内容哈希已嵌入到文件名中。

性能分析

ReactDOM 在 v16.5+ 的开发模式下自动支持性能分析，但由于性能分析会增加一些小的额外开销，因此在生产模式下需要选择加入。您可以使用 --profile 标志选择加入。使用 npm run build -- --profile 或 yarn build --profile 在生产构建中启用性能分析。有关使用 React DevTools 进行性能分析的详细信息，请参阅 React 文档。