如何在create-react-app中为index.html指定Cache-Control标头

2024-04-30

我正在尝试遵循 create-react-app.dev 的指导生产构建文档 https://create-react-app.dev/docs/production-build/#static-file-caching:

为了向用户提供最佳性能,最佳实践是为 index.html 以及 build/static 中的文件指定 Cache-Control 标头。此标头允许您控制浏览器和 CDN 缓存静态资源的时间长度。如果您不熟悉 Cache-Control 的用途,请参阅本文以获取详细介绍。

对构建/静态资源使用 Cache-Control: max-age=31536000 ,对其他所有资源使用 Cache-Control: no-cache 是一个安全有效的起点,可确保用户的浏览器始终检查更新的 index.html 文件,并将所有构建/静态文件缓存一年。请注意,您可以安全地使用 build/static 的一年有效期,因为文件内容哈希已嵌入到文件名中。

在 index.html 中使用 HTML 标头是正确的方法吗 - 例如:

<meta http-equiv="Cache-Control" content="max-age: 31536000, no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

(信用:这个堆栈溢出响应 https://stackoverflow.com/a/2068407/11664580 and 这个 YouTube 教程 https://www.youtube.com/watch?v=HiBDZgTNpXY)

如果是这样,我如何遵循文档的建议,即我应该为构建/静态资产设置“max-age=31536000,并为其他所有内容设置 Cache-Control: no-cache”?我不知道如何为不同的资产设置不同的控件。


正如埃文斯提到的,这个标头应该从服务器端设置。后端编程语言/服务器之间实际设置标头的方式有所不同。

这里有一些例子:

  1. Node.js res.setHeader('Cache-Control', 'no-cache');
  2. Nginx add_header Cache-Control no-cache;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在create-react-app中为index.html指定Cache-Control标头 的相关文章

随机推荐