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 上使用一年到期,因为文件内容哈希嵌入到文件名中。

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang