ReactJS：如何防止浏览器缓存静态文件？

Question

我正在使用 ReactJS 开发我的项目，我使用 create-react-app 创建我的应用程序。构建项目后，我使用我的服务器为 build 文件夹提供服务。当我更新我的应用程序时，用户的浏览器仍然使用我的应用程序的旧版本，因为它缓存了静态文件（js，css）。那么有什么办法可以防止浏览器缓存静态文件呢？谢谢！

Answer 1

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)

Answer 2

创建 React 应用程序提供服务工作者，这会在客户端缓存各种文件。如果你愿意，你可以注销服务工作者。但请注意，您将无法像 PWA

那样在离线模式下提供您的应用程序

Answer 3

假设您禁用了 pwa，您可能希望在 public/index.html

中添加这些行

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

ReactJS：如何防止浏览器缓存静态文件？

ReactJS: How to prevent browser from caching static files?

caching

static-files

browser-cache

reactjs

create-react-app