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

Question

我正在尝试遵循有关 create-react-app.dev 的 生产构建文档 的指导：

为了向您的用户提供最佳性能，最佳做法是为 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">

（来源： 此堆栈溢出响应 和 此 YouTube 教程）

如果是这样，我如何按照文档的建议设置“max-age=31536000 用于构建/静态资产，以及 Cache-Control：no-cache 用于其他所有内容”？我不知道如何为不同的资产设置不同的控件。

原文由 JimmyTheCode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如埃文斯提到的，这个标头应该从服务器端设置。您实际设置标头的方式因后端编程语言/服务器而异。

这里有一些例子：

1. Node.js res.setHeader('Cache-Control', 'no-cache');
2. Nginx add_header Cache-Control no-cache;

原文由 Serhiy Mamedov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这些标头需要由将发送内容和设置标头的服务器设置。这些是 HTTP 标头，它不会以任何方式在 React 中或与 React 一起处理。

原文由 Evans 发布，翻译遵循 CC BY-SA 4.0 许可协议