React结合Laravel部署更新后浏览器加载旧缓存？清npm、Laravel缓存无效如何解决

核心逻辑 #

浏览器命中旧缓存的本质是：静态资源的URL没有随代码更新发生变化，同时服务端给资源下发了过长的强缓存规则，导致浏览器不会主动向服务器校验资源是否有更新。对应操作不需要调整业务代码，只需要优化构建流程和服务端缓存规则即可。 #

具体操作步骤 #

1. 开启构建流程的资源版本化（必做） #

资源版本化会给每个静态资源的URL追加基于文件内容生成的唯一hash标识，只要文件内容改动，hash值就会变化，浏览器会把新URL当成全新资源请求，不会命中旧缓存。

• 如果使用Laravel Mix构建React项目：在webpack.mix.js的生产配置中追加版本化规则：

  mix.react('resources/js/app.js', 'public/js')
     .postCss('resources/css/app.css', 'public/css', [])
     .version(); // 生产环境自动开启hash追加
  

  生产构建执行npm run production后，blade模板中用{{ mix('js/app.js') }}引入资源时，会自动拼接对应hash参数，不需要手动修改模板内容。
• 如果使用Laravel Vite构建React项目：本身生产构建就默认生成带hash的静态文件名，只要在blade模板中用@vite指令引入资源，不需要额外配置版本化规则。
• 部署检查点：每次上线必须把构建生成的mix-manifest.json（Mix场景）或整个public/build目录（Vite场景）完整上传到服务器对应路径，只上传单个改动的JS/CSS文件、漏传资源清单文件会直接导致新旧资源匹配失败。

2. 配置分层的静态资源缓存响应头（必做） #

不要给所有静态资源配置统一的缓存规则，按资源类型拆分设置，规则可直接在Nginx/Apache的虚拟主机配置中添加，不需要在Laravel业务代码中逐路由判断：

• 对带hash的构建产物（public/build目录下所有文件、带hash查询参数的JS/CSS）：配置长期强缓存规则，响应头设置为Cache-Control: public, max-age=31536000, immutable。因为这类资源的URL绑定了内容hash，内容变化时URL一定会变，长期缓存不会导致旧版本残留，还能大幅提升二次访问的加载速度。
• 对入口HTML文件：配置不强制缓存规则，响应头设置为Cache-Control: no-cache, no-store, must-revalidate。保证用户每次访问页面时，都会从服务器拉取最新的HTML入口文件，进而加载对应最新版本的hash静态资源。

无效操作说明 #

之前尝试的两类操作都无法解决该问题，原因如下：

• 清理npm缓存仅作用于本地开发环境的安装包缓存，和线上客户端浏览器的缓存逻辑完全无关
• 执行php artisan cache clean清理的是Laravel服务端的应用缓存、配置缓存，不会影响浏览器侧的缓存判断逻辑

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