ReactJS:如何防止浏览器缓存静态文件?

问题描述 投票:3回答:2

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

reactjs caching browser-cache create-react-app static-files
2个回答
2
投票

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


2
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.