使用Fastly将动态CSS URL放入HTTP标头中

Question

我正在生成用于缓存破坏的动态CSS。例如，它们的格式为styles-thisisthecontenthash123.css。

我还希望使用HTTP链接标头来更快地加载文件。也就是说，具有头部Link: <styles-thisisthecontenthash123.css>; rel=stylesheet

我非常确定可以使用VCL快速实现这一点，但我对生态系统还不够熟悉，无法弄清楚。CSS URL位于缓存的index.html中。我想我可以打开index.html，也许可以使用正则表达式来解析出CSS URL。我该怎么做呢？

Answer 1

如果我对您的问题理解正确的话，您希望为所有index.html请求包含一个link标头。您可以使用Fastly做到这一点，但是如果CSS文件的URL发生变化，您将无法使用VCL提取该信息(您无法检查响应正文)。

您可以使用edge dictionaries，每当您的CSS文件名发生更改时，都可以通过API更新引用。

问题是，如果你打算在文件发生变化时调用API，最好保持文件名一致(styles.css)，并在发布新版本时发送一个cache invalidation (purge)。Fastly将在大约150ms内清除缓存，所以你所要做的就是添加标题，这可以在带有condition的快速门户网站中完成。