创建生产构建
npm run build 会创建一个 build 目录，用于存放生产构建。build/static 目录中将是你的 JavaScript 和 CSS 文件。 build/static 中的每个文件名都包含文件内容的唯一哈希值。文件名中的此哈希启用 长期缓存技术 。
运行新创建的 Create React App 应用程序的生产版本时，会生成3个 .js 文件（称为 chunks ，理解为“块”），并将其放置在 build/static/js 目录中：
main.[hash].chunk.js
- 这是你的 应用程序 代码。
App.js等。
1.[hash].chunk.js
- 这是 vendor(第三方库) 的代码，其中包含你在
node_modules中导入的模块。拆分 vendor(第三方库) 和 应用程序 代码的潜在优势之一是启用长期缓存技术 以提高应用程序加载性能。由于 vendor(第三方库) 代码的更改频率低于实际应用程序代码，因此浏览器将能够单独缓存它们，并且每次应用程序代码更改时都不会重新下载它们。
runtime~main.[hash].js
- 这是 webpack runtime(运行时) 逻辑 chunk ，用于加载和运行你的应用程序。默认情况下，此内容将嵌入
build/index.html文件中以保存其他网络请求。你可以通过指定我们的 高级配置 中记录的INLINE_RUNTIME_CHUNK=false来选择不这样做，这将加载此 chunk 而不是将其嵌入index.html。
如果你使用 code splitting(代码拆分) 来拆分应用程序，这将在 build/static 文件夹中创建额外的 chunks 。
静态文件缓存
build/static 目录中的每个文件都会有一个基于文件内容生成的唯一哈希 附加到文件名，这允许你使用 积极的缓存技术 来避免浏览器重新下载那些文件内容没有改变的资源。如果文件的内容在后续构建中发生更改，则生成的文件名哈希将会不同。
为了向用户提供最佳性能，最佳做法是为 index.html 以及 build/static 中的文件指定 Cache-Control 标头。此标头允许你控制浏览器和 CDN 将缓存静态资产的时间长度。如果你不熟悉 Cache-Control 的功能，请参阅 这篇文章 以获得精彩的介绍。
使用 Cache-Control: max-age=31536000 用于 build/static 资源，而 Cache-Control: no-cache 用于其他所有内容是一个安全有效的起点，可确保用户的浏览器始终检查更新的 index.html 文件，并将缓存所有 build/static 文件一年。请注意，你可以安全地在 build/static 上使用一年到期，因为文件内容哈希嵌入到文件名中。