如何基于 accept header（清漆）缓存 webp 图像
How to (varnish) cache webp images based on accept header
TLDR;
我正在升级我的客户端过时的服务器，但我无法根据浏览器接受缓存（或不缓存）webp 图像 header。 Varnish 缓存 webp 图像，直到有人使用旧浏览器访问该网站。之后，所有（兼容 webp 的）浏览器都会获得缓存的 jpg 图像。
服务器设置
- Ubuntu 18.04.2
- Nginx 作为 ssl 终结器 (:443)
- 清漆以加快传输速度 (:80)
- Apache2 作为后端，因为特殊的 htaccess 要求 (:8080)
- WordPress 网站
- "wprocket" html 缓存插件
- "WebP Express" 动态提供 webp 图片的插件（默认模式）
- 核心和插件是最新的
问题
当支持浏览器的 webp 访问该网站时（清漆缓存清除后第二次访问），它会提供扩展名为 .jpg 的图像，但是当您检查 headers 以获取 content-type 时，它说"image/webp"，就像 "WebP Express" 插件说的那样。 Varnish 日志是 "hit"，因此工作正常。但是当我现在例如在 IE 中获取图像（不支持 webp）并返回 chrome 并刷新 header 中的 content-type 现在说 "image/jpg"并记录清漆命中。这是不受欢迎的行为。它应该只在兼容的浏览器上提供 webp 图像，在旧浏览器上提供 jpg 版本。但它们应该被清漆缓存，因为......（阅读下文）
不需要的解决方案
我已经更改了 default.vcl 文件以从缓存中排除 png|jpe?g|webp 文件。这 "fixes" 当然是问题，但又增加了加载时间。带有清漆的测试图像的平均加载时间：+/- 20ms。没有清漆的相同测试图像的平均加载时间：+/- 120ms。我知道差别很小，但在某些画廊页面上，差别很明显。因此应启用清漆缓存。
我试过的
向 default.vcl 添加 webp 检查我从：
https://github.com/igrigorik/webp-detect/blob/master/varnish.vcl --> 好像没做什么？ （是的，我重新启动了清漆服务）
尝试了 "WebP Express" 插件常见问题解答中的 "I am on NGINX" 方法，但我卡在了该方法的第一步。而且我仍然认为这是错误的方法，因为它会循环 arround varnish 而不是通过 varnish 提供正确的版本。
我的问题
我该如何处理？ "WebP Express" 插件设置有问题吗？这是我必须添加到 default.vcl 文件中的东西吗（那将是最简单的）。也许是两者的结合？或者也许是完全不同的东西？我被卡住了，现在欢迎任何建议。
我和我的同事花了更多时间对此进行测试和研究，我们似乎找到了解决方案。
我们只是将以下 3 行添加到 apache2 后端的 .htaccess 中：
# Fix for serving webp in compatible browsers with "webp express" wordpress plugin
<IfModule mod_headers.c>
Header append Vary "content-type"
</IfModule>
之后重新启动 varnish 服务，您也会在 headers 中看到它。
现在 varnish 在 Chrome 和其他兼容的浏览器中始终提供 webp 图像，在 IE 和其他不兼容的浏览器中提供 jpg。
TLDR;
我正在升级我的客户端过时的服务器，但我无法根据浏览器接受缓存（或不缓存）webp 图像 header。 Varnish 缓存 webp 图像，直到有人使用旧浏览器访问该网站。之后，所有（兼容 webp 的）浏览器都会获得缓存的 jpg 图像。
服务器设置
- Ubuntu 18.04.2
- Nginx 作为 ssl 终结器 (:443)
- 清漆以加快传输速度 (:80)
- Apache2 作为后端，因为特殊的 htaccess 要求 (:8080)
- WordPress 网站
- "wprocket" html 缓存插件
- "WebP Express" 动态提供 webp 图片的插件（默认模式）
- 核心和插件是最新的
问题
当支持浏览器的 webp 访问该网站时（清漆缓存清除后第二次访问），它会提供扩展名为 .jpg 的图像，但是当您检查 headers 以获取 content-type 时，它说"image/webp"，就像 "WebP Express" 插件说的那样。 Varnish 日志是 "hit"，因此工作正常。但是当我现在例如在 IE 中获取图像（不支持 webp）并返回 chrome 并刷新 header 中的 content-type 现在说 "image/jpg"并记录清漆命中。这是不受欢迎的行为。它应该只在兼容的浏览器上提供 webp 图像，在旧浏览器上提供 jpg 版本。但它们应该被清漆缓存，因为......（阅读下文）
不需要的解决方案
我已经更改了 default.vcl 文件以从缓存中排除 png|jpe?g|webp 文件。这 "fixes" 当然是问题，但又增加了加载时间。带有清漆的测试图像的平均加载时间：+/- 20ms。没有清漆的相同测试图像的平均加载时间：+/- 120ms。我知道差别很小，但在某些画廊页面上，差别很明显。因此应启用清漆缓存。
我试过的
向 default.vcl 添加 webp 检查我从： https://github.com/igrigorik/webp-detect/blob/master/varnish.vcl --> 好像没做什么？ （是的，我重新启动了清漆服务）
尝试了 "WebP Express" 插件常见问题解答中的 "I am on NGINX" 方法，但我卡在了该方法的第一步。而且我仍然认为这是错误的方法，因为它会循环 arround varnish 而不是通过 varnish 提供正确的版本。
我的问题
我该如何处理？ "WebP Express" 插件设置有问题吗？这是我必须添加到 default.vcl 文件中的东西吗（那将是最简单的）。也许是两者的结合？或者也许是完全不同的东西？我被卡住了，现在欢迎任何建议。
我和我的同事花了更多时间对此进行测试和研究，我们似乎找到了解决方案。
我们只是将以下 3 行添加到 apache2 后端的 .htaccess 中：
# Fix for serving webp in compatible browsers with "webp express" wordpress plugin
<IfModule mod_headers.c>
Header append Vary "content-type"
</IfModule>
之后重新启动 varnish 服务，您也会在 headers 中看到它。
现在 varnish 在 Chrome 和其他兼容的浏览器中始终提供 webp 图像，在 IE 和其他不兼容的浏览器中提供 jpg。