React JS生产环境部署后最新代码变更未在浏览器展示问题咨询

问题判定 #

你的问题完全符合浏览器静态资源缓存的特征：无痕模式不加载本地历史缓存即可正常展示更新，99%的概率是缓存导致的。

核心原因 #

Create React App默认构建生产包时，JS、CSS等资源会自动携带内容哈希后缀（例如main.8a3d2f9.js），内容修改后哈希值会同步变化，这类资源本身不会出现缓存未更新的问题。问题根源是你的index.html文件被浏览器缓存了：旧的index.html会指向旧哈希的JS/CSS资源，即便你部署了新资源，浏览器加载旧的index.html也永远拿不到新内容。

解决方案 #

1. 优先配置index.html的不缓存规则（最有效） #

在你的Web服务器/CDN/OSS服务中，单独给index.html配置响应头，强制浏览器每次都向服务器请求最新的index.html：

Cache-Control: no-cache, no-store, must-revalidate, max-age=0
Pragma: no-cache
Expires: 0

如果用Nginx部署，可直接添加如下配置：

location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

如果用云托管服务，直接在后台的缓存规则中，给index.html设置缓存过期时间为0即可。

2. 其他静态资源配置长缓存 #

带哈希后缀的JS、CSS、图片等资源，可设置长缓存降低请求消耗：

Cache-Control: public, max-age=31536000, immutable

3. 兼容redux-persist的存储缓存 #

你的代码中用到了redux-persist做本地状态持久化，如果新版本代码和旧版本的本地存储结构不兼容，也可能出现展示异常。每次发版可修改persist的key增加版本后缀，避免读取旧的不兼容缓存：

// 旧版本
const persistConfig = { key: 'root', ... }
// 新版本发布时修改为
const persistConfig = { key: 'root_v2', ... }

4. 可选：增加版本更新提示 #

可以在前端增加版本检测逻辑，例如每次路由切换时校验当前加载的index.html是否为最新版，有更新时提示用户手动刷新页面。

非缓存的罕见原因 #

如果配置完缓存规则仍然有问题，可排查以下可能：

• 部署流程问题：构建产物没有完全替换服务器上的旧文件，或CDN没有执行强制回源刷新，还在返回旧资源
• 打包配置问题：修改了CRA默认的打包规则，移除了静态资源的哈希后缀，导致新文件和旧文件名一致，被浏览器缓存
• Service Worker缓存：如果开启了PWA的Service Worker功能，旧的Service Worker还在提供旧的缓存资源，可配置新版本发布后自动更新Service Worker。

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