小编典典

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

all

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

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

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

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

  1. 将所有资产移至 Amazon CloudFront 并忘记 GZipping;

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

一些 解决方法可以解决这个问题,但基本上这些 都不起作用 。[链接]。

现在,Amazon Cloudfront 似乎支持自定义源,如果您使用自定义源
[链接] ,现在可以使用标准 HTTP Accept-Encoding 方法来提供 gzip
压缩的内容。

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

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

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


阅读 61

收藏
2022-07-12

共1个答案

小编典典

更新: 亚马逊现在支持 gzip 压缩,因此不再需要。 亚马逊公告

原答案:

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

gzip -9 production.min.css

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

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

  1. 当请求文件时,Apache 不需要 CPU 来压缩内容。
  2. 文件以最高压缩级别压缩(假设gzip -9)。
  3. 您正在从 CDN 提供文件。

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

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

2022-07-12