javascript - 通过 S3 从 Amazon CloudFront 提供 gzip 后的 CSS 和 JavaScript

Question

我一直在寻找加快网站加载速度的方法，而我想探索的一种方法是更多地利用 Cloudfront。

因为 Cloudfront 最初不是作为自定义来源 CDN 设计的，而且它不支持 gzip，所以到目前为止我一直使用它来托管我的所有图像，这些图像在我的站点代码中由它们的 Cloudfront cname 引用，并且使用远期 header 进行了优化。

另一方面，CSS 和 javascript 文件托管在我自己的服务器上，因为直到现在我的印象是它们无法从 Cloudfront 进行 gzip 压缩，而且 gzip 的 yield (大约 75% )超过使用 CDN(约 50%):Amazon S3(以及 Cloudfront)不支持通过使用浏览器发送的 HTTP Accept-Encoding header 以标准方式提供 gzip 压缩的内容，以表明它们支持 gzip压缩，因此他们无法动态压缩和提供组件。

因此，直到现在，我的印象是必须在两种选择之间做出选择:

1. 将所有 Assets 移至 Amazon CloudFront，忘记 GZipping；

2. 保持组件自托管并配置我们的服务器以检测传入的请求并在适当的时候执行动态 GZipping，这是我目前选择做的事情。

有个变通方法可以解决这个问题，但基本上这些不起作用。 [ link ].

现在，Amazon Cloudfront 似乎支持自定义来源，并且如果您使用自定义来源，现在可以使用标准 HTTP 接受编码方法来提供 gzip 压缩的内容 [ link ].

到目前为止，我还无法在我的服务器上实现新功能。我在上面链接到的博客文章是我发现的唯一详细说明更改的文章，似乎暗示您只能启用 gzipping(条形变通方法，我不想使用)，如果您选择自定义来源，我宁愿不这样做:我发现在我的 Cloudfront 服务器上托管相应的文件并从那里链接到它们更简单。尽管仔细阅读了文档，但我不知道:

• 新功能是否意味着文件应该托管在我自己的域服务器上通过自定义源，如果是，什么代码设置将实现这一点；

• 如何配置 css 和 javascript header 以确保它们是从 Cloudfront 压缩的。

Answer 1

更新:亚马逊现在支持 gzip 压缩，因此不再需要。 Amazon Announcement

原答案:

答案是压缩 CSS 和 JavaScript 文件。是的，你没看错。

gzip -9 production.min.css

这将产生 production.min.css.gz。删除 .gz，上传到 S3(或您正在使用的任何源服务器)并将文件的 Content-Encoding header 显式设置为 gzip.

这不是即时 gzipping，但您可以非常轻松地将其包装到您的构建/部署脚本中。优点是:

1. 当请求文件时，Apache 无需 CPU 即可压缩内容。
2. 文件以最高压缩级别压缩(假设 gzip -9)。
3. 您从 CDN 提供文件。

假设您的 CSS/JavaScript 文件 (a) 已缩小并且 (b) 大到足以证明在用户机器上解压缩所需的 CPU 是合理的，那么您可以在此处获得显着的性能提升。

请记住:如果您对 CloudFront 中缓存的文件进行更改，请确保在进行此类更改后使缓存无效。