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

Question

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

Answer 1

TLDR：您将要通过HTTP标头发送缓存指令。

Cache-Control标头中有几个指令可控制缓存的行为，到期和验证。

缓存行为：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

缓存控制：公共 可以通过任何缓存来缓存资源

缓存控制：私有 资源只能由浏览器缓存

缓存控制：无存储 将浏览器设置为始终从服务器请求资源

缓存控制：无缓存 这告诉浏览器缓存文件，但不使用它，直到它与服务器核实我们是否拥有最新版本。该验证是通过ETag标头完成的。 （https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag）

Answer 2

Create react应用程序提供了服务工作者，这会在客户端缓存各种文件。 如果需要，可以注销服务工作者。 但是请注意，您将无法像PWA那样以离线模式提供应用程序

Answer 3

假设您已禁用 pwa，您可能需要在 public/index.html 中添加这些行

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