移动体验 / 方法解读

移动端 JS 库更新后体积未显著减小?检查压缩字典传输

检查服务器是否正确配置了 Use-As-Dictionary 响应头以及 Available-Dictionary 请求头,确认字典是否在缓存有效期内。

展示压缩字典树的示意图,包含树状结构节点和连接线。
主题资料配图,非新闻现场照片 · 配图:压缩字典树.png

检查字典响应头是否正确设置

服务器在提供字典资源时必须包含 Use-As-Dictionary 响应头,该头部的值用于定义哪些资源可以使用该字典。例如,设置 match 模式来匹配特定版本的 JavaScript 文件。如果未设置此头,浏览器将无法识别该资源为压缩字典,后续请求中也不会携带 Available-Dictionary 头部,导致无法利用字典进行增量压缩。

确认字典资源的缓存策略是否允许存储。浏览器仅会在响应新鲜或 stale-while-revalidate 指令允许时才使用存储的字典。如果服务器设置了 no-store 或 max-age=0 且没有 stale-while-revalidate,浏览器将不会保存字典,导致后续请求无法匹配字典。检查响应头中的 Cache-Control 配置,确保字典可以被缓存以供后续增量压缩使用。

验证客户端请求是否携带字典哈希

当浏览器请求匹配字典模式的资源时,必须在请求头中包含 Available-Dictionary 头部,该头部包含字典的 SHA-256 哈希值。如果请求中缺少此头部,服务器将无法确认客户端拥有正确的字典,从而无法返回字典压缩的响应。使用网络抓包工具检查客户端请求,确认 Accept-Encoding 头部中是否包含 dcb 或 dcz,以及 Available-Dictionary 头部是否存在。

确认字典哈希值是否匹配。服务器必须验证客户端提供的哈希值与服务器存储的字典哈希是否一致。如果哈希不匹配,服务器应拒绝使用字典压缩,并返回标准的压缩响应。开发者工具的 Issues 面板通常会提示“响应无法用作字典,因为其新鲜度已过期”或哈希不匹配的错误信息,这有助于快速定位问题。

排查字典与目标资源的同源与跨域限制

字典资源必须与使用字典的资源同源,或者遵循 CORS 规则。如果字典是单独的资源,必须通过 crossorigin 属性加载,且服务器必须返回 Access-Control-Allow-Origin 响应头。如果跨域配置不正确,浏览器将阻止字典的下载或使用,导致增量压缩失败。检查字典资源的加载请求,确认没有跨域错误。

字典本身也受 HTTP 缓存分区限制,不能在不同源之间共享。即使两个网站下载了相同的资源作为字典,浏览器也会为每个源单独缓存字典。这意味着每个源都需要单独下载字典,无法跨域复用。此外,如果启用了隐私保护功能(如禁用 Cookie),浏览器可能会限制字典的使用,因为字典可能被用作追踪向量。

确认压缩响应头与 Vary 头部配置

服务器返回字典压缩的资源时,必须在 Content-Encoding 头部中指定 dcb 或 dcz 编码。如果未设置正确的编码头,浏览器可能无法识别响应为字典压缩格式,从而无法正确解压。同时,响应必须包含 Vary 头部,指定 accept-encoding 和 available-dictionary,以防止缓存服务器将字典压缩的资源错误地分发给不支持字典的客户端。

检查字典压缩文件本身的格式是否正确。字典压缩的资源必须包含特定的魔术头和嵌入的字典哈希。如果静态资源在构建时未正确生成这些头部,服务器返回的响应将无法被浏览器识别为字典压缩格式。确保使用 Brotli 或 ZStandard 算法,并按照规范添加魔术头和哈希,以生成有效的字典压缩文件。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. Compression Dictionary Transport - HTTP | MDN ↗
  2. 配图:压缩字典树.png ↗
← 更多移动体验文章返回顶部 ↑