如何在ReactJS中禁用前进/后退缓存并确保JS代码正常执行？

一、先排查核心原因 #

禁用缓存后JS不执行，大概率是缓存策略配置错误导致：

• 检查浏览器控制台网络请求，确认JS文件的HTTP状态码（是否为304、404）
• 查看JS文件响应头，确保Cache-Control配置正确，且存在Content-Type: application/javascript
• 验证JS文件内容是否完整（缓存配置错误可能导致返回旧的/损坏的文件）

二、不同场景下的正确配置方法 #

1. 开发环境（Create React App / Vite） #

框架默认已禁用强缓存，若手动修改过配置，可按以下方式恢复：

Create React App

无需额外配置，默认会给静态资源加哈希后缀，开发服务器的Cache-Control为no-cache。若之前改了配置，恢复package.json默认脚本：

"scripts": {
  "start": "react-scripts start"
}

Vite

开发环境默认禁用缓存，若有异常，修改vite.config.js：

export default {
  server: {
    headers: {
      'Cache-Control': 'no-cache, no-store, must-revalidate'
    }
  }
}

2. 生产环境（静态资源部署） #

需结合资源哈希+服务器响应头实现无缓存，同时保证JS正常执行：

第一步：静态资源加哈希

• Create React App和Vite打包时，默认会给JS/CSS文件添加唯一哈希后缀（如main.abc123.js），确保每次打包文件名不同，避免浏览器缓存旧文件。

第二步：服务器配置响应头

根据所用服务器设置正确的Cache-Control：

Nginx配置

在站点配置中添加：

location ~* \.(js|css|png|jpg)$ {
    expires -1;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

Apache配置

在.htaccess文件中添加：

<FilesMatch "\.(js|css)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
</FilesMatch>

3. 应急方案（服务器无法修改配置时） #

可在index.html的JS引用后添加随机参数，强制浏览器每次重新请求文件（注意：会影响性能，仅应急使用）：

<script src="/static/js/main.js?v=%REACT_APP_VERSION%"></script>

然后在package.json中设置打包时自动替换版本号：

"scripts": {
  "build": "REACT_APP_VERSION=$(date +%s) react-scripts build"
}

三、验证配置效果 #

配置完成后，通过浏览器控制台确认：

1. JS文件请求的Cache-Control为no-cache, no-store, must-revalidate
2. JS文件状态码为200（而非304）
3. 查看React组件渲染日志或执行console.log('test')，确认JS代码正常运行

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