阅读背景:

通过S3从Amazon CloudFront提供压缩的CSS和JavaScript

来源:互联网 

I've been looking for ways of making my site load faster and one way that I'd like to explore is making greater use of Cloudfront.

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

Because Cloudfront was originally not designed as a custom-origin CDN and because it didn't support gzipping, I have so far been using it to host all my images, which are referenced by their Cloudfront cname in my site code, and optimized with far-futures headers.

由于Cloudfront最初并不是作为定制的CDN设计的,也因为它不支持gzipping,所以到目前为止我一直在使用它来托管我的所有图像,这些图像由他们的Cloudfront cname在我的站点代码中引用,并使用far-futures header进行优化。

CSS and javascript files, on the other hand, are hosted on my own server, because until now I was under the impression that they couldn't be served gzipped from Cloudfront, and that the gain from gzipping (about 75 per cent) outweighs that from using a CDN (about 50 per cent): Amazon S3 (and thus Cloudfront) did not support serving gzipped content in a standard manner by using the HTTP Accept-Encoding header that is sent by browsers to indicate their support for gzip compression, and so they were not able to Gzip and serve components on the fly.

另一方面,CSS和javascript文件驻留在我自己的服务器上,因为到目前为止,我的印象是,它们无法从Cloudfront获得gzipping, gzipping带来的好处(约75%)超过了使用CDN(约50%)带来的好处:Amazon S3(以及Cloudfront)不支持使用浏览器发送的HTTP Accept-Encoding头以表示它们对gzip压缩的支持,因此它们不能动态地使用gzip和服务组件,从而以一种标准的方式提供gziked内容。

Thus I was under the impression, until now, that one had to choose between two alternatives:

因此,到目前为止,我的印象是,人们必须在两种选择中作出选择:

  1. move all assets to the Amazon CloudFront and forget about GZipping;

    将所有资产转移到Amazon CloudFront,忘记GZipping;

  2. keep components self-hosted and configure our server to detect incoming requests and perform on-the-fly GZipping as appropriate, which is what I chose to do so far.

    保持组件自托管并配置我们的服务器以检测传入的请求并适当地执行即时GZipping,这是我目前选择的做法。

There were workarounds to solve this issue, but essentially these didn't work. [link].

有很多办法可以解决这个问题,但基本上这些都不管用。[链接]。

Now, it seems Amazon Cloudfront supports custom origin, and that it is now possible to use the standard HTTP Accept-Encoding method for serving gzipped content if you are using a Custom Origin [link].

现在,Amazon Cloudfront似乎支持自定义起源,如果您使用自定义起源[link],那么现在可以使用标准的HTTP Accept-Encoding方法来服务gziked内容。

I haven't so far been able to implement the new feature on my server. The blog post I linked to above, which is the only one I found detailing the change, seems to imply that you can only enable gzipping (bar workarounds, which I don't want to use), if you opt for custom origin, which I'd rather not: I find it simpler to host the coresponding fileds on my Cloudfront server, and link to them from there. Despite carefully reading the documentation, I don't know:

到目前为止,我还不能在我的服务器上实现这个新特性。博客我上面有关的,这是唯一一个我发现细节的变化,似乎暗示你只能启用gzip(酒吧工作区,我不想使用),如果你选择定制的起源,我宁愿不:我觉得它简单的主机coresponding提起Cloudfront服务器,并链接到他们。尽管仔细阅读了文件,我还是不知道:

  • whether the new feature means the files should be hosted on my own domain server via custom origin, and if so, what code setup will achieve this;

    新特性是否意味着文件应该通过自定义起源驻留在我自己的域服务器上,如果是,代码设置将实现这一点;

  • how to configure the css and javascript headers to make sure they are served gzipped from Cloudfront.

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

6 个解决方案

#1


193  

UPDATE: Amazon now supports gzip compression, so this is no longer needed. Amazon Announcement

更新:Amazon现在支持gzip压缩,因此不再需要它。亚马逊宣布

Original answer:

最初的回答:

The answer is to gzip the CSS and JavaScript files. Yes, you read that right.

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

gzip -9 production.min.css

This will produce production.min.css.gz. Remove the .gz, upload to S3 (or whatever origin server you're using) and explicitly set the Content-Encoding header for the file to gzip.

这将产生production.min.css.gz。删除.gz,上传到S3(或者您正在使用的任何源服务器),并显式地将文件的内容编码头设置为gzip。

It's not on-the-fly gzipping, but you could very easily wrap it up into your build/deployment scripts. The advantages are:

它不是动态的gzipping,但是您可以很容易地将其打包到您的构建/部署脚本中。优点是:

  1. It requires no CPU for Apache to gzip the content when the file is requested.
  2. 当请求文件时,Apache不需要CPU对内容进行gzip压缩。
  3. The files are gzipped at the highest compression level (assuming gzip -9).
  4. 文件在最高的压缩级别(假设gzip -9)上压缩。
  5. You're serving the file from a CDN.
  6. 您正在从CDN上提供文件。

Assuming that your CSS/JavaScript files are (a) minified and (b) large enough to justify the CPU required to decompress on the user's machine, you can get significant performance gains here.

假设您的CSS/JavaScript文件(a)已被缩小,并且(b)足够大,足以证明在用户机器上解压缩所需的CPU,那么您可以在这里获得显著的性能收益。

Just remember: If you make a change to a file that is cached in CloudFront, make sure you invalidate the cache after making this type of change.

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

#2


15  

My answer is a take off on this: https://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

我的答案是:https://blog.kenweiner.com/2009/08/serving-gzippe -javascript- filt-from.html

Building off skyler's answer you can upload a gzip and non-gzip version of the css and js. Be careful naming and test in Safari. Because safari won't handle .css.gz or .js.gz files.

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

site.js and site.js.jgz and site.css and site.gz.css (you'll need to set the content-encoding header to the correct MIME type to get these to serve right)

网站。js和site.js。jgz和网站。css和site.gz。css(您需要将内容编码头设置为正确的MIME类型,以使这些内容正确地服务)

Then in your page put.

然后放在你的页面上。

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

<noscript> 
  <link type="text/css" rel="stylesheet" href="/go.html?url=https://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css">
</noscript> 
<script type="text/javascript"> 
(function () {
    var sr_css_file = 'https://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css';
    if (sr_gzipEnabled) {
      sr_css_file = 'https://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 is just sr_gzipEnabled = true; This tests to make sure the browser can handle the gzipped code and provide a backup if they can't.

gzipcheck.js。jgz只是sr_gzipEnabled = true;这些测试是为了确保浏览器能够处理gzipped代码,并在无法处理时提供备份。

Then do something similar in the footer assuming all of your js is in one file and can go in the footer.

然后在页脚中做一些类似的操作,假设所有的js都在一个文件中,可以在页脚中。

<div id="sr_js"></div> 
<script type="text/javascript"> 
(function () {
    var sr_js_file = 'https://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js';
    if (sr_gzipEnabled) {
       sr_js_file = 'https://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> 

UPDATE: Amazon now supports gzip compression. Announcement, so this is no longer needed. Amazon Announcement

更新:Amazon现在支持gzip压缩。声明,所以这不再需要了。亚马逊宣布

#3


12  

Cloudfront supports gzipping.

Cloudfront支持gzip。

Cloudfront connects to your server via HTTP 1.0. By default some webservers, including nginx, dosn't serve gzipped content to HTTP 1.0 connections, but you can tell it to do by adding:

Cloudfront通过HTTP 1.0连接到服务器。默认情况下,包括nginx在内的一些web服务器不会向HTTP 1.0连接提供gziked内容,但是可以通过添加以下内容来告诉它:

gzip_http_version 1.0

to your nginx config. The equivalent config could be set for whichever web server you're using.

你的nginx配置。可以为正在使用的任何web服务器设置等效的配置。

This does have a side effect of making keep-alive connections not work for HTTP 1.0 connections, but as the benefits of compression are huge, it's definitely worth the trade off.

这确实会产生一个副作用,即使存活的连接不能用于HTTP 1.0连接,但是由于压缩的好处很大,所以这种交换绝对是值得的。

Taken from https://www.cdnplanet.com/blog/gzip-nginx-cloudfront/

从https://www.cdnplanet.com/blog/gzip-nginx-cloudfront/

Edit

编辑

Serving content that is gzipped on the fly through Amazon cloud front is dangerous and probably shouldn't be done. Basically if your webserver is gzipping the content, it will not set a Content-Length and instead send the data as chunked.

通过Amazon cloud front实时提供gzip格式的内容是危险的,可能不应该这样做。基本上,如果您的webserver正在压缩内容,它将不会设置内容长度,而是将数据发送为chunked。

If the connection between Cloudfront and your server is interrupted and prematurely severed, Cloudfront still caches the partial result and serves that as the cached version until it expires.

如果Cloudfront和您的服务器之间的连接被中断和提前中断,那么Cloudfront仍然保留部分结果,并将其作为缓存版本,直到过期。

The accepted answer of gzipping it first on disk and then serving the gzipped version is a better idea as Nginx will be able to set the Content-Length header, and so Cloudfront will discard truncated versions.

gzipping它首先在磁盘上,然后提供gziked版本的公认答案是一个更好的主意,因为Nginx将能够设置内容长度的头,因此Cloudfront将丢弃截断的版本。

#4


5  

We've made a few optimisations for uSwitch.com recently to compress some of the static assets on our site. Although we setup a whole nginx proxy to do this, I've also put together a little Heroku app that proxies between CloudFront and S3 to compress content: https://dfl8.co

我们最近为uswitch网站做了一些优化,以压缩我们网站上的一些静态资产。虽然我们设置了一个完整的nginx代理来完成这个任务,但我也在CloudFront和S3之间建立了一个小的Heroku应用程序来压缩内容:https://dfl8.co。

Given publicly accessible S3 objects can be accessed using a simple URL structure, https://dfl8.co just uses the same structure. I.e. the following URLs are equivalent:

给定公共可访问的S3对象,可以使用简单的URL结构https://dfl8进行访问。co只是使用了相同的结构。即下列网址是等同的:

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

#5


5  

Yesterday amazon announced new feature, you can now enable gzip on your distribution.

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

It works with s3 without added .gz files yourself, I tried the new feature today and it works great. (need to invalidate you're current objects though)

它可以与s3一起工作,而不需要自己添加.gz文件,我今天尝试了这个新特性,效果很好。(需要使当前对象无效)

More info

更多信息

#6


0  

You can configure CloudFront to automatically compress files of certain types and serve the compressed files.

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

See AWS Developer Guide

看到AWS开发者指南


分享到: