是否有必要将查询字符串附加到img标记中的图像和css中的图像以刷新缓存的项目？

Question

我知道通常的做法是在css,javascript和图像文件的未来设置一个过期时间,然后通过附加查询字符串(或更改文件名)来确保所有浏览器在文件更改后立即获取最新内容

由此<link rel="stylesheet" type="text/css" href="base.css">:

对此:

<link rel="stylesheet" type="text/css" href="base.css?v=1234">

要么:

<link rel="stylesheet" type="text/css" href="base_1234.css">

但是在css文件中引用的图像呢？

// Inside base.css 
background: url(/img/logo.png)

// Is this necessary(?):
background: url(/img/logo.png?v=1234)

或者/img/logo.png当base.css将文件名更改为base.css?v=1234或base_1234.css自动时会重新加载？

而且,怎么样在图像src的img标签都有效？

Answer 1

浏览器在确定绝对路径后发出这些请求,因此如果您以这种方式"缓存破坏"静态资产,则无论在何处调用,您都需要单独为每个文件执行此操作.但是,您可以通过在后端使其成为变量来使自己更容易.

您可以将字符串附加为您只需要在后端的一个位置更新的变量,可能与LESS或SASS等CSS预处理器一起使用以获取所有图像.

或者通过将版本添加到基本URL(site.com/folder/styles.css => site.com/v123/folder/styles.css)来使用相对路径.这可以添加到您应用中的现有静态资产基本url变量,然后在服务器上,您只需使用UrlRewrite去除版本.这样,从CSS中相对引用的所有图像也会自动获得版本,具有相同的"缓存清除"效果.

你可能是额外的聪明,并自动设置变量作为构建过程的一部分,从你的版本控制系统中的最后一次提交的哈希 - 这也将使得未来的调试更加容易.