create-react-app 创建生产构建 npm run build
创建生产构建
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 等。
[number].[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
如果你使用 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 上使用一年到期，因为文件内容哈希嵌入到文件名中。
