通过S3服务gzip压缩CSS和JavaScript从亚马逊CloudFront的 [英] Serving gzipped CSS and JavaScript from Amazon CloudFront via S3

问题描述

我一直在寻找让我的网站加载速度更快，一说我想探讨的是更多地使用的Cloudfront的方式方法。

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最初不是作为一个定制的起源CDN和，因为它不支持gzip压缩，我至今一直在使用它来承载我所有的图像，这是由他们的Cloudfront CNAME在我的地盘$ C $引用c和优化远期货头。

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.

CSS和JavaScript文件，在另一方面，是托管自己的服务器上，因为到现在为止我下的是IM pression他们无法送达的的Cloudfront gzip压缩，以及从gzip压缩的增益（约75％）大大超过了从使用CDN（约百分之50）：亚马逊三（因此的Cloudfront）不支持通过使用HTTP Accept-Encoding头是受浏览器发送以指示服务以标准方式gzip压缩内容他们gzip的COM pression的支持，所以他们没能gzip和服务组件的飞行。

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.

于是我下的是IM pression，到现在为止，一个有两个备选方案中做出选择：

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

1. 将所有资产亚马逊CloudFront的，而忘记了gzip压缩;

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

请组件自托管和配置我们的服务器检测传入的请求，并执行对即时使用gzip压缩适当，这是我选择这样做为止。

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.

目前的是的变通办法来解决这个问题，但本质上这些没有工作。 [<一href="http://www.alfajango.com/blog/how-to-combine-gzip-plus-cdn-for-fastest-page-loads/">link].

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

现在，好像亚马逊的Cloudfront支持自定义的起源，以及现在可以使用标准的HTTP接受编码为在职gzip压缩的内容，如果您使用的是定制产地方法 [<一href="http://www.nomitor.com/blog/2010/11/10/gzip-support-for-amazon-web-services-cloudfront/">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].

我至今仍未能实现我的服务器上的新功能。在博客中，我联系到上面，这是唯一一个我发现细节的变化，似乎在暗示，你只能启用gzip压缩（栏处理方法是，我不希望使用），如果你选择自定义的起源，这我宁愿不：我觉得简单的主机我的Cloudfront服务器上的coresponding个行业，并从那里链接到他们。尽管仔细阅读文档，我不知道的：

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:

• 无论是新功能意味着该文件的通过，应主持自己的域名服务器上的 的习俗起源，如果是的话，什么code设置将实现这一目标;

• 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;

如何配置CSS和JavaScript头，以确保他们供应gzip压缩的的Cloudfront。

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

推荐答案

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

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

gzip -9 production.min.css

这将产生 production.min.css.gz 。删除。广州，上传到S3（或任何出身您正在使用的服务器），并明确设置内容编码的文件头 GZIP 。

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.

这不是即时使用gzip压缩，但你可以很容易地把它包装成您的构建/部署脚本。其优点是：

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

1. 在它无需CPU让Apache gzip压缩的内容时被请求的文件。
2. 在该文件用gzip压缩的最高COM pression水平（假设的gzip -9 ）。
3. 您是从一个CDN服务的文件。

1. It requires no CPU for Apache to gzip the content when the file is requested.
2. The files are gzipped at the highest compression level (assuming gzip -9).
3. You're serving the file from a CDN.

假设你的CSS / JavaScript文件是（a）精缩和（b）大到足以证明需DECOM preSS在用户的机器上的CPU，你可以在这里得到显著的性能提升。

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.

请记住：如果你更改了被缓存在CloudFront的文件时，一定要使得这种类型的变化后无效缓存

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.

这篇关于通过S3服务gzip压缩CSS和JavaScript从亚马逊CloudFront的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！