ReactJS：如何防止浏览器缓存静态文件？ [英] ReactJS: How to prevent browser from caching static files?

问题描述

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

I'm working on my project using ReactJS and I use create-react-app to create my app. After building project, I use my server to serve the build folder. And when I update my app, the browser of user still uses the old version of my app because it caches the static files (js, css). So is there any way to prevent browser from caching static files ? Thank you !

推荐答案

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

TLDR: You will want to send caching instructions via HTTP headers.

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

The Cache-Control header has several directives to control cache behavior, expiration, and validation.

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

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

Cache-Control: public resource can be cached by any cache

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

Cache-Control: private resource can only be cached by the browser

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

Cache-Control: no-store Sets the browser to always request the resource from the server

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

这篇关于ReactJS：如何防止浏览器缓存静态文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！