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

Question

我正在尝试遵循 create-react-app.dev 的 Production Build documentation:

上的指导

To deliver the best performance to your users, it's best practice to specify a Cache-Control header for index.html, as well as the files within build/static. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what Cache-Control does, see this article for a great introduction.

Using Cache-Control: max-age=31536000 for your build/static assets, and Cache-Control: no-cache for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated index.html file, and will cache all of the build/static files for one year. Note that you can use the one year expiration on build/static safely because the file contents hash is embedded into the filename.

是在 index.html 中使用 HTML headers 的正确方法 - 例如：

<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">

（来源：this stack overflow response and this YouTube tutorial）

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

Answer 1

这些 headers 需要由将发送内容并设置 headers 的服务器设置。这些是 HTTP headers，无论如何都不会在反应中或反应中处理。

Answer 2

正如 Evans 提到的，这个 headers 应该从服务器端设置。您实际设置 headers 的方式在后端编程 languages/servers 之间有所不同。

这里有几个例子：

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

Answer 3

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

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

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

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

How to specify a Cache-Control header for index.html in create-react-app

html

caching

reactjs

create-react-app