javascript - 网站更改正在缓存，不会为客户更新

Question

我在一个实时网站上做了一些更改(我知道，这不是最佳做法，但有人告诉我这样做)，但我在缓存方面遇到了问题。每次我对 CSS(实际上是 SASS)进行更改时，我都必须按 CTRL F5 才能看到更改。这对我来说不是问题，但用户开始提示网站损坏，他们中的许多人不知道如何清除缓存或使用 CTRL F5。

我尝试添加以下代码，但它不起作用。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

我也试过添加这个脚本:

        <script type="text/javascript">
        $(document).ready(function(){
            $('img').each(function(){
                var date = new Date;
                // add the current unix timestamp in microseconds to the the image src as a query string
                this.src = this.src + '?' + date.getTime();
            });
        });
    </script>

虽然我不懂 Javascript，所以我不知道如何正确使用它。我一直在寻找答案，其他人说这些东西对他们有用，但它们根本不适合我。我是一名设计师和前端开发人员，所以 PHP 和 Javascript 有点超出我的能力范围。

最后，我还阅读了有关使用版本标签 - ?v=x.x 的内容，但我的问题是该网站是由其他开发人员编码的，我不知道他们如何链接到我们的样式表(使用 SASS)。

任何帮助将不胜感激!

谢谢!

Answer 1

理想情况下，您将使用 PHP 检查文件的 filemtime()(上次修改时间)，并使用一种称为 versioning 的技术以表明它是一个已更改的文件，并且不从缓存中加载它。

---

生成的 HTML 看起来类似于:

<link href="/your/css/file.css?ver=<?php echo filemtime('/your/css/file.css'); ?>" rel="stylesheet" type="text/css"/>