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

Posted 2021-03-29

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

答案

TLDR：您需要通过HTTP标头发送缓存说明。

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

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

缓存控制：任何缓存都可以缓存公共资源

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

Cache-Control：no-store将浏览器设置为始终从服务器请求资源

Cache-Control：no-cache这告诉浏览器缓存文件但不使用它，直到它检查服务器以验证我们是否有最新版本。使用ETag标头完成此验证。 （https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag）

另一答案

创建反应应用程序提供服务工作者，并缓存客户端上的各种文件。如果需要，可以取消注册服务工作者。但请注意，您将无法像在PWA中那样在离线模式下提供应用程序