如何在 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”？我不知道如何为不同的资产设置不同的控件。

Answer 1

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

这里有一些例子：

1. Node.jsres.setHeader('Cache-Control', 'no-cache');
2. nginxadd_header Cache-Control no-cache;

Answer 2

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