如何避免React应用构建文件被浏览器缓存？

Create React App 默认就通过文件名哈希机制解决缓存问题，不需要额外修改构建命令。

核心原理 #

执行npm run build构建生产版本时，所有静态资源（JS、CSS、图片等）的文件名会自动带上基于文件内容生成的哈希值（例如main.7a2b9c.js）：

• 文件内容不变，哈希值就不变，浏览器会继续使用缓存；
• 文件内容更新，哈希值随之改变，浏览器会请求全新的文件，自然不会读取旧缓存。

唯一例外是根目录的index.html，它不带哈希，但它会自动引用最新的带哈希资源文件，所以关键要保证index.html不被浏览器长期缓存。

部署时的关键配置 #

要完全解决缓存问题，还需要配合服务器端的缓存策略设置：

• 对带哈希的静态资源（比如/static/js/*.js、/static/css/*.css）设置长期缓存：配置Cache-Control: public, max-age=31536000, immutable，让浏览器长期缓存这些文件，减少重复请求。
• 对index.html设置禁止缓存或短期缓存：配置Cache-Control: no-cache, no-store, must-revalidate，或者设置较短的max-age（比如max-age=60），确保每次访问都能拿到最新的index.html。

兜底方案 #

如果遇到极端缓存情况（比如用户浏览器强制缓存了旧的index.html），可以在应用中添加版本检测逻辑：

• 在package.json里维护版本号，部署时更新；
• 应用启动时请求一个版本接口或读取静态文件里的版本信息，和本地缓存的版本对比，如果不一致，提示用户刷新浏览器。

内容的提问来源于stack exchange，提问作者chetan