0

我正在尝试使用以下代码通过 CloudFlare Workers 实现 HTTP/2 服务器推送：

let mainScript='main-es2015.e66dc0bc532401d980dc.js';
response.headers.append("Link", "</"+mainScript+">; rel=preload; as=script;");

我也尝试过添加跨域

response.headers.append("Link", "</"+mainScript+">; rel=preload; as=script; crossorigin;");

但它不起作用。

在第一种情况下，开发人员控制台确实显示文件正在从 CloudFlare 服务器推送以及 html 响应。但浏览器不使用该文件并重复请求再次下载该文件。

在第二种情况下，开发者控制台显示浏览器确实尊重预加载的标头，但文件的内容不是从 Cloudflare 服务器推送的，浏览器必须单独请求拉取 javascript 文件，尽管它在收到后立即发出请求html文件。

我想要的是 cloudflare 服务器推送文件和浏览器以使用该推送文件而不发出重复请求？

令人惊讶的是，下面的代码非常适用于 css 文件：

  response.headers.append("Link", "</styles.1d228f78d240e617dd5e.css>; rel=preload; as=style;");

但不适用于任何其他内容，如 javascript 字体文件、图像等。

谁能指导我在这里缺少什么？

4

1 回答 1

1

正如离线讨论的那样，您有两个问题：

您的字体被双重下载，而不是使用推送版本

字体需要crossorigin链接头中的属性，否则推送将被忽略。看到这个答案：HTTP2 push webfonts not used

但是，即使您添加了 Cloudflare 似乎停止推动，所以他们可能不支持这一点。

您的大多数 JavaScript 文件同样被双重下载，而不是使用推送版本

这是因为您将它们指定为模块：

<script src="main-es2015.e66dc0bc532401d980dc.js" type="module"></script>

而不是简单的脚本文件：

<script src="main-es2015.e66dc0bc532401d980dc.js"></script>

成功推送的那些没有被定义为模块。将链接标题更改为as="module"似乎在 Chrome 中有效，但这不在preload规范中，并且看起来正在讨论替代方案，因此不确定它的支持程度或是否会继续支持。

于 2020-05-08T23:52:17.733 回答