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

Question

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

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

另一方面，CSS和javascript文件托管在我自己的服务器上，因为直到现在我的印象是他们无法从Cloudfront gzip服务，并且gzipping（大约75％）的收益超过了使用CDN（约50％）：Amazon S3（以及Cloudfront）不支持使用浏览器发送的HTTP Accept-Encoding标头以标准方式提供gzip压缩内容，以表明它们支持gzip压缩，以及所以他们无法动态地使用Gzip和服务组件。

因此，直到现在，我仍然不得不在两种选择之间做出选择：

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

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

有变通方法来解决这个问题，但本质上这些没有工作 。 [ 链接 ]。

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

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

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

• 如何配置css和javascript标头以确保它们是从Cloudfront gzip中提供的。

Answer 1

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

原始答案：

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

gzip -9 production.min.css

这将生成production.min.css.gz 。 删除.gz ，上传到S3（或您正在使用的.gz服务器），并将文件的Content-Encoding标头显式设置为gzip 。

它不是即时的gzipping，但你可以很容易地将它包装到你的构建/部署脚本中。 优点是：

1. 在请求文件时，Apache不需要CPU来gzip内容。
2. 文件在最高压缩级别进行gzip -9压缩（假设为gzip -9 ）。
3. 您正在从CDN提供该文件。

假设你的CSS / JavaScript文件被缩小（b）大到足以证明在用户机器上解压缩所需的CPU，你可以在这里获得显着的性能提升。

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

Answer 2

我的回答是： http ： //blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

根据skyler的回答，你可以上传一个gzip和非gzip版本的css和js。 在Safari中小心命名和测试。 因为safari不会处理.css.gz或.js.gz文件。

site.js和site.js.jgz以及site.css和site.gz.css （您需要将content-encoding标头设置为正确的MIME类型才能使这些服务正确）

然后在你的页面中。

<script type="text/javascript">var sr_gzipEnabled = false;</script> 
<script type="text/javascript" src="http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr.gzipcheck.js.jgz"></script> 

<noscript> 
  <link type="text/css" rel="stylesheet" href="http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css">
</noscript> 
<script type="text/javascript"> 
(function () {
    var sr_css_file = 'http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css';
    if (sr_gzipEnabled) {
      sr_css_file = 'http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css.gz';
    }

    var head = document.getElementsByTagName("head")[0];
    if (head) {
        var scriptStyles = document.createElement("link");
        scriptStyles.rel = "stylesheet";
        scriptStyles.type = "text/css";
        scriptStyles.href = sr_css_file;
        head.appendChild(scriptStyles);
        //alert('adding css to header:'+sr_css_file);
     }
}());
</script> 

gzipcheck.js.jgz只是sr_gzipEnabled = true; 这测试是为了确保浏览器可以处理gzip压缩代码并提供备份，如果他们不能。

然后在页脚中执行类似的操作，假设您的所有j都在一个文件中，并且可以进入页脚。

<div id="sr_js"></div> 
<script type="text/javascript"> 
(function () {
    var sr_js_file = 'http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js';
    if (sr_gzipEnabled) {
       sr_js_file = 'http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js.jgz';
    }
    var sr_script_tag = document.getElementById("sr_js");         
    if (sr_script_tag) {
    var scriptStyles = document.createElement("script");
    scriptStyles.type = "text/javascript";
    scriptStyles.src = sr_js_file;
    sr_script_tag.appendChild(scriptStyles);
    //alert('adding js to footer:'+sr_js_file);
    }
}());
</script> 

更新：亚马逊现在支持gzip压缩。 公告，所以不再需要。 亚马逊公告

Answer 3

Cloudfront支持gzipping。

Cloudfront通过HTTP 1.0连接到您的服务器。 默认情况下，某些Web服务器（包括nginx）不会将gzip压缩内容提供给HTTP 1.0连接，但您可以通过添加以下内容来告诉它：

gzip_http_version 1.0

到你的nginx配置。 可以为您使用的任何Web服务器设置等效配置。

这确实会产生副作用，使得保持活动连接不适用于HTTP 1.0连接，但由于压缩的好处是巨大的，所以它绝对值得权衡。

摘自http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/

编辑

提供通过亚马逊云前端进行gzip压缩的内容是危险的，可能不应该这样做。 基本上，如果您的网络服务器正在压缩内容，它将不会设置内容长度，而是将数据作为分块发送。

如果Cloudfront与您的服务器之间的连接中断并过早切断，Cloudfront仍会缓存部分结果并将其作为缓存版本提供，直至其过期。

接受的首先在磁盘上解压缩然后提供gzip压缩版本的答案是一个更好的想法，因为Nginx将能够设置Content-Length标头，因此Cloudfront将丢弃截断版本。

Answer 4

我们最近对uSwitch.com进行了一些优化，以压缩我们网站上的一些静态资产。 虽然我们设置了一个完整的nginx代理来实现这一点，但我还整理了一个在CloudFront和S3之间代理以压缩内容的Heroku应用程序： http ： //dfl8.co

鉴于可以使用简单的URL结构访问可公开访问的S3对象， http：//dfl8.co只使用相同的结构。 即以下URL是等效的：

http://pingles-example.s3.amazonaws.com/sample.css
http://pingles-example.dfl8.co/sample.css
http://d1a4f3qx63eykc.cloudfront.net/sample.css

Answer 5

昨天亚马逊发布了新功能，您现在可以在您的发行版上启用gzip。

它适用于s3而没有自己添加.gz文件，我今天尝试了新功能并且效果很好。 （虽然需要使你的当前对象无效）

更多信息

Answer 6

您可以将CloudFront配置为自动压缩某些类型的文件并提供压缩文件。

请参阅AWS 开发者指南