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

Question

我试图遵循create-react-app.dev的生产构建文档中的指导:

为了向您的用户提供最佳性能，最佳做法是为index.html以及build/static内的文件指定Cache-Control头。此标头允许您控制浏览器和CDN将缓存静态资源的时间长度。如果您不熟悉Cache-Control的作用，请参阅本文进行介绍。

对于您的build/static资产使用Cache-Control: max-age=31536000，并对其他所有内容使用Cache-Control: no-cache，这是一个安全有效的起点，可以确保您的用户的浏览器始终检查更新的index.html文件，并将所有build/static文件缓存一年。请注意，您可以安全地在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">

(参考：这个Stack Overflow回答和这个YouTube教程)

如果是这样，我如何按照文档建议设置“max-age = 31536000”来控制您的 build/static 资产，并为其他所有内容设置“Cache-Control：no-cache”？我不知道如何为不同的资产设置不同的控件。

- JimmyTheCode

---

这些应该在服务器端设置为响应头，该服务器正在提供您的生产构建文件。 - Ajeet Shah

在React中，当我们运行构建命令时，它会生成一个名为"index.html"的文件和一个名为"static"的文件夹，我们可以直接将它们上传到服务器。 - DS9

使用Nginx为React应用程序进行缓存控制 - vsync

Answer 1

正如Evans所说，这些标头应该从服务器端设置。您实际上如何设置这些标头取决于后端编程语言/服务器。

以下是一些示例：

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

- Serhiy Mamedov

Answer 2

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

- Evans

---

谢谢，如果我想使用缓存控制，根据上面引用的文档：“对于您的构建/静态资产使用Cache-Control：max-age = 31536000，并对其他所有内容使用Cache-Control：no-cache是一个安全和有效的起点，可以确保用户的浏览器始终检查更新的index.html文件”，我该如何实现？这是在后端服务器中完成的吗？还是在index.html头文件中完成的？ - JimmyTheCode

Answer 3

你可以在提供资产文件的服务器/CDN上指定不同的缓存行为。

例如：如果您正在使用AWS S3存储桶，则可以在对象的元数据属性下执行此操作。

参考：https://docs.aws.amazon.com/AmazonS3/latest/userguide/UsingMetadata.html#object-metadata

- Saurish Kar