如何通过Varnish(Fastly)正则配置实现HTTP/2推送所有CSS/JS/PNG静态资源

核心问题说明 #

你尝试的配置无法生效是因为h2.push指令仅支持传入明确的单个资源路径字符串，不支持直接传入正则表达式批量匹配资源，VCL在处理请求时无法自动枚举所有符合后缀规则的站点资源，也不能凭空将全量匹配资源推送给客户端。

可行实现方案 #

你可以通过以下两种常用方案实现需求：

方案1：手动枚举推送资源（适合资源固定、更新频率低的站点） #

直接在VCL中逐个列出需要推送的css、js、png资源路径即可，示例配置如下：

if (fastly_info.is_h2 && req.url ~ "pl_PL")
{
  # 样式资源
  h2.push("/bootstrap-theme/app.css");
  h2.push("/bootstrap-theme/global.css");
  # 脚本资源
  h2.push("/bootstrap-theme/app.js");
  h2.push("/bootstrap-theme/vendor.js");
  # 图片资源
  h2.push("/img/common/logo.png");
  h2.push("/img/common/bg.png");
  # 其他需要推送的资源按格式补充即可
}

方案2：配合预加载头自动推送（适合资源动态变化的站点） #

Fastly原生支持识别Link响应头中的rel=preload标记，自动将对应资源转换为HTTP/2推送，不需要手动在VCL中逐个写推送规则：

1. 首先在你的源站返回主HTML响应时，自动提取页面内所有需要推送的css、js、png资源，生成对应的Link响应头，示例如下：

   Link: </static/app.css>; rel=preload; as=style, </static/app.js>; rel=preload; as=script, </static/logo.png>; rel=preload; as=image
   

2. 只需在VCL中添加如下配置开启自动推送即可：

   if (fastly_info.is_h2) {
     # 无需额外修改，Fastly默认会自动推送所有带rel=preload的Link头对应资源
     # 若需要禁止某资源推送，可在对应Link头中添加nopush参数
   }
   

注意事项 #

• 避免全量无差别推送所有三类资源：推送过多资源会挤占主文档的带宽，反而拖慢首屏加载速度，建议仅推送首屏必需的核心资源。
• 避免重复推送：可通过Cookie标记已访问过的用户，对已有资源缓存的老用户关闭推送，减少带宽浪费。
• 推送的资源需要提前在Fastly节点缓存，避免推送未缓存的回源资源反而降低加载效率。

内容的提问来源于stack exchange，提问作者Łukasz D. Tulikowski