上传新版本代码时如何强制浏览器清除缓存

Posted 2023-02-22

【中文标题】上传新版本代码时如何强制浏览器清除缓存

【英文标题】：How to force browser to clear cache when i upload a new version of code

【发布时间】：2020-04-01 03:58:55

【问题描述】：

我目前正在运行一个带有 VueJs Web 应用程序的 laravel。我对css进行了一些更改，并在几天前发布了新版本。由于浏览器缓存，大多数 css 都搞砸了。

除了要求用户强制重新加载缓存，这是不可行的，还有其他方法可以强制浏览器检索新版本的文件以便反映更改吗？

谢谢！

【问题讨论】：

之前询问过，请参阅：google.com/… 和 ***.com/questions/118884/…

Laravel mix 不能处理这个吗？ laravel.com/docs/6.x/mix#versioning-and-cache-busting

【参考方案1】：

最好的方法是使用 mix 来创建已编译资产的版本。

mix.js('resources/js/app.js', 'public/js')
.version();

并且因为在开发模式下不需要版本，您可以使用以下代码来告诉 mix 到 puth 文件版本只有当您运行 npm run prod

mix.js('resources/js/app.js', 'public/js');
if (mix.inProduction()) 
    mix.version();

有关更多信息，您可以查看 laravel 文档https://laravel.com/docs/8.x/mix#versioning-and-cache-busting

【讨论】：

欢迎来到 SO，很好的答案。这绝对是 Laravel 的方式。

【参考方案2】：

实现这一目标的各种策略。

立即修复：

使用虚拟后缀重命名您的 CSS/JS 文件并更新您的 html 以指向它们。 浏览器将被欺骗相信它们是不同的文件并会刷新。 框架可能会在构建时为您自动执行此操作。

另一种处理此问题的常用方法是调整标头以始终检查服务器是否缓存过期 - 可以在 .htaccess 中手动配置 - 检查缓存控制和过期标头。

【参考方案3】：

是的，您可以通过在文件末尾添加版本号来防止浏览器缓存新更新的脚本。

<link 
    rel="stylesheet" 
    href=" asset('css/app.css?v='.filemtime(public_path('css/app.css'))) " 
/>

你也可以对 js 文件做同样的事情。

filemtime() 方法返回文件修改时间，仅在您修改 css 文件时更改。