Question

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

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

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

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

将所有资产移至Amazon CloudFront并忘记GZipping;
保持组件自托管，并配置我们的服务器以检测传入请求并执行适当的动态GZipping，这是我到目前为止所做的。

有解决此问题的解决方法，但基本上这些无法正常工作。 [link]。

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

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

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

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

Answer 1

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

原始答案：

答案是gzip CSS和JavaScript文件。是的，你读得对。

gzip -9 production.min.css

这将产生production.min.css.gz。删除.gz，上传到S3（或您正在使用的任何原始服务器），并明确将文件的Content-Encoding标题设置为gzip。

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

在请求文件时，Apache不需要CPU来gzip内容。
文件以最高压缩级别进行gzip压缩（假设为gzip -9）。
您正在从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压缩代码并提供备份，如果他们不能。

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

<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压缩。公告，所以不再需要。 Amazon Announcement

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/

修改

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

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

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

Answer 4

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

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

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文件，我今天尝试了新功能并且效果很好。（虽然需要使你失去当前的对象）

More info

Answer 6

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

请参阅AWS Developer Guide

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

6 个答案: