ReactJS：如何防止浏览器缓存静态文件？
ReactJS: How to prevent browser from caching static files?
我正在使用 ReactJS 开发我的项目，我使用 create-react-app 创建我的应用程序。构建项目后，我使用我的服务器为 build 文件夹提供服务。当我更新我的应用程序时，用户的浏览器仍然使用我的应用程序的旧版本，因为它缓存了静态文件（js，css）。那么有什么办法可以防止浏览器缓存静态文件呢？
谢谢！
TLDR：您将希望通过 HTTP headers 发送缓存指令。
Cache-Control header 有几个控制缓存行为、过期和验证的指令。
缓存行为：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
Cache-Control: public
资源可以被任何缓存缓存
Cache-Control：私人
资源只能被浏览器缓存
Cache-Control: no-store
设置浏览器始终向服务器请求资源
Cache-Control: no-cache
这告诉浏览器缓存文件但不使用它，直到它检查服务器以验证我们拥有最新版本。此验证是使用 ETag header 完成的。 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag)
创建 React 应用程序提供服务工作者，这会在客户端缓存各种文件。
如果你愿意，你可以注销服务工作者。
但请注意，您将无法像 PWA
那样在离线模式下提供您的应用程序
假设您禁用了 pwa，您可能希望在 public/index.html
中添加这些行
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
我正在使用 ReactJS 开发我的项目，我使用 create-react-app 创建我的应用程序。构建项目后，我使用我的服务器为 build 文件夹提供服务。当我更新我的应用程序时，用户的浏览器仍然使用我的应用程序的旧版本，因为它缓存了静态文件（js，css）。那么有什么办法可以防止浏览器缓存静态文件呢？
谢谢！
TLDR：您将希望通过 HTTP headers 发送缓存指令。
Cache-Control header 有几个控制缓存行为、过期和验证的指令。
缓存行为：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
Cache-Control: public 资源可以被任何缓存缓存
Cache-Control：私人 资源只能被浏览器缓存
Cache-Control: no-store 设置浏览器始终向服务器请求资源
Cache-Control: no-cache 这告诉浏览器缓存文件但不使用它，直到它检查服务器以验证我们拥有最新版本。此验证是使用 ETag header 完成的。 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag)
创建 React 应用程序提供服务工作者，这会在客户端缓存各种文件。 如果你愿意，你可以注销服务工作者。 但请注意，您将无法像 PWA
那样在离线模式下提供您的应用程序假设您禁用了 pwa，您可能希望在 public/index.html
中添加这些行<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />