Laravel应用更新后，如何解决浏览器缓存旧JQuery脚本的问题？

下面是几种可靠的解决方法，覆盖Laravel原生支持到服务器配置层面：

1. 用Laravel Mix自动添加版本哈希（推荐） #

Laravel Mix内置资源版本化功能，会给编译后的资源添加唯一哈希后缀，只要文件内容变化，哈希就会更新，浏览器会自动识别为新文件并重新加载。

• 第一步：在webpack.mix.js中给jQuery资源开启版本化：

mix.js('resources/js/jquery.js', 'public/js')
   .version(); // 开启版本哈希

• 第二步：在Blade模板中用mix()函数引入资源：

<script src="{{ mix('/js/jquery.js') }}"></script>

编译后生成的HTML会类似：

<script src="/js/jquery.abc123def.js"></script>

每次更新jQuery内容后，重新运行npm run prod（生产环境）或npm run dev（开发环境），Mix会自动更新哈希，浏览器就会加载新文件。

2. 手动添加版本查询参数 #

如果不想用Mix，最简单的方式是手动给脚本URL加版本参数，更新时修改参数值即可：

<script src="{{ asset('js/jquery.js?v=2') }}"></script>

下次更新jQuery时，把v=2改成v=3，浏览器会因为URL变化重新请求新文件。

3. 配置服务器HTTP缓存头 #

通过服务器设置静态资源的缓存策略，平衡缓存效率和更新及时性：

Apache（通过.htaccess） #

在项目根目录的.htaccess中添加：

<FilesMatch "\.(js|css)$">
    Header set Cache-Control "max-age=86400, must-revalidate"
</FilesMatch>

• max-age=86400：设置1天的缓存有效期
• must-revalidate：缓存到期前，浏览器会向服务器验证文件是否更新，若有更新则下载新版本

Nginx #

在Nginx配置文件的server块中添加：

location ~* \.(js|css)$ {
    expires 1d;
    add_header Cache-Control "public, must-revalidate";
}

4. 开发环境临时禁用缓存（仅开发用） #

开发阶段可以给脚本加时间戳参数，强制每次请求都加载最新文件，生产环境不要用，会影响性能：

<script src="{{ asset('js/jquery.js?v=' . time()) }}"></script>

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