缓存在 SASS 文件中链接的破坏图像

Posted 2023-03-06

【中文标题】缓存在 SASS 文件中链接的破坏图像

【英文标题】：Cache busting images which are linked inside SASS files

【发布时间】：2015-12-26 17:19:47

【问题描述】：

我对 Laravel 5.0 相当陌生，但对 php 不是。我一直在使用 Elixir 来编译我的 SASS，从我的资源目录复制图像并通过 mix.version 函数运行它们以防止缓存。

不过，这对 CSS、图像和 javascript 非常有用；是否也可以让 Elixir 缓存在我的 CSS/SASS 中链接的图像？当然，对图像进行版本控制很容易，但是有没有办法调整 CSS 以反映新的文件名？

我发现了这个：https://github.com/trentearl/gulp-css-url-adjuster 它允许您将查询参数附加到 CSS 文件中的文件路径，这样就解决了一半的问题。如果可以在每次 gulp 运行时自动更改查询参数，我会很乐意使用它。

有什么想法可以实现，或者是否有可能？

我想这样做的原因是我一直在开发我的应用程序并且我使用一个经常重新排列的大型精灵表，缓存破坏是一个要求，如果它可以在 gulp 运行时自动运行，那将节省我很多时间和精力。

谢谢

【参考方案1】：

我正在使用 gulp-sass 并且 @AJReading mixin 没有正确连接字符串，它编译为：

background-image: url(+ "$url" + ?v= + u2f58eec1 + );

这就是我的情况

混音

@mixin background-cache-bust($url) 
   background-image: unquote('url(' + $url + '?v=' + unique_id() + ')');

【参考方案2】：

使用@Amo 的答案作为灵感，我最终使用的解决方案是mixin，它利用unique_id() 函数生成随机值。这避免了必须定义一个自定义的SASS 函数，因此它更简单，正如@Amelia 指出的那样，也更简洁。

混入

@mixin background-cache-bust($url) 
    background-image: #'url(' + $url + #'?v=' + unique_id() + #')';

示例

.sprite 
    @include background-cache-bust('/build/images/common/sprite.png');

结果

.sprite 
    background-image: "url(/build/images/common/sprite.png?v=u95ab40e0)";

【讨论】：

最好改路径而不是使用查询字符串，然后在Web服务器上重写路径。

这样会更好吗？无论如何，浏览器都会将查询参数视为不同的 URL。通过服务器更改路径和重写会产生额外的复杂性，这是单独使用 Sass 无法实现的。

查询字符串方法不是缓存清除的最佳实践，在某些情况下可能会失败。某些浏览器不会将不同的查询字符串视为不同的文件，并且某些软件（我听说过：Squid）不会缓存带有查询字符串的文件。此外，使用查询字符串方法可以防止像 IIS 这样的 Web 服务器提供 ETag 标头，从而允许浏览器检查缓存有效性，而不是仅仅依赖到期日期/时间。

【参考方案3】：

当您使用 SASS 时，可以在您的 SASS 文件中定义一个可用于缓存清除的自定义变量，然后将该变量附加到任何图像 url 路径。

变量只需要保存对当前时间戳的引用。

为此，您需要create a new function in SASS 公开时间戳，可按如下方式进行：

module Sass::Script::Functions
    def timestamp()
        return Sass::Script::String.new(Time.now.strftime("%Y%m%d%H%M"))
    end
end

那么就可以按如下方式访问时间戳了：

$cacheVersion = timestamp()

.someClass 
    background-image: url('your/path/file.jpg?cacheversion='$cacheVersion);

编译后，会产生如下内容：

.someClass 
    background-image: url('your/path/file.jpg?cacheversion=201510091349');

【讨论】：

最好在这里做一个 mixin，并将给定的链接返回为url($link?v=$timestamp)

这其实是个好主意。我一直在用elixir或gulp解决这个问题，但实际上，添加时间戳意味着每次编译SASS时它都会改变（这在开发过程中会发生很多），但并不重要一旦将最新的更改部署到他们的环境中。