强制资产重新缓存

Force asset re-caching

Cornerstone 的轮播不适合我客户的设计,因此我构建了一个自定义英雄组件,我已将其包含在多个自定义页面模板中。为了允许客户端手动更新图像,我将主图像设置为使用 {{cdn}} handlebars 助手从 WebDAV 中拉取图像。

例如background-image: url('{{cdn "webdav:img/home-hero.jpg"}}');

我们现在 运行 遇到的问题是,因为 CDN 在服务器上缓存站点的资产文件,当我的客户端通过 WebDAV 更新 home-hero.jpg 时,服务器没有知道的方式,所以它继续服务于旧版本 home-hero.jpg

我的客户有没有办法强制重新缓存资产,或者完全绕过它?我尝试使用 imbypass 参数 (webdav:img/home-hero.jpg?imgbypass=on),但这显然只服务于未优化但已经缓存的图像。

一种解决方案是将随机查询字符串附加到图像 src URL 以防止缓存。如果您正在开发 Stencil 主题,最简单的方法是使用 {{moment}} 助手生成日期字符串,这样您就可以确保每次都获得一个唯一的值。

<img src="/content/home-hero.jpg?{{moment}}"/>

将呈现为:

<img src="/content/home-hero.jpg?2018-08-23T00:00:00-05:00">

有关使用查询字符串防止缓存的更多信息:https://css-tricks.com/strategies-for-cache-busting-css/