通过S3从Amazon CloudFront提供gzip CSS和JavaScript
我一直在寻找让网站加载速度更快的方法，而我想探索的一种方法是更多地使用Cloudfront。
由于Cloudfront原本不是作为自定义源CDNdevise的，因为它不支持gzip，所以我到目前为止一直使用它来托pipe我的所有图像，这些图像在我的站点代码中由其Cloudfront cname引用，并在远处进行了优化期货头。
另一方面，CSS和JavaScript文件被托pipe在我自己的服务器上，因为直到现在我的印象是他们无法从Cloudfront进行gzip压缩，从gzip（约75％）中获得的收益超过了从使用CDN（约50％）：Amazon S3（因此Cloudfront）不支持以标准方式使用浏览器发送的HTTP Accept-Encoding标头来表示对gzip压缩的支持，以及所以他们无法在Gzip上运行组件。
因此，直到现在我还是觉得，人们不得不在两种select之间做出select：
-
将所有资产移动到Amazon CloudFront并忘记GZipping;
-
保持组件自我托pipe，并configuration我们的服务器来检测传入的请求，并在适当的时候执行即时的GZipping，这是我select做到目前为止。
有解决方法来解决这个问题，但基本上这些都不起作用 。 [ 链接 ]。
现在，似乎Amazon Cloudfront支持自定义来源，并且现在可以使用标准HTTP Accept-Encoding方法来提供经过压缩的内容，如果您使用自定义来源 [ link ]。
我到目前为止还没有能够在我的服务器上实现新function。 我链接到上面的博客文章，这是我发现的唯一一个细节的变化，似乎暗示，你只能启用gzipping（酒吧解决方法，我不想使用），如果你select自定义起源，我宁愿不要：我发现在我的Cloudfront服务器上托pipe相应的文件更简单，并从那里链接到它们。 尽pipe仔细阅读文档，我不知道：
-
新function是否意味着这些文件应该通过自定义来源托pipe在我自己的域服务器上 ，如果是这样的话，代码设置将实现这一点;
-
如何configurationCSS和JavaScript头，以确保他们从Cloudfront gzip服务。
答案是gzip CSS和JavaScript文件。 是的，你没有看错。
gzip -9 production.min.css 这将产生production.min.css.gz 。 删除.gz ，上传到S3（或者你使用的.gz服务器），并明确地设置文件的Content-Encoding头为gzip 。
这不是即时的gzip，但你可以很容易地把它包装到你的构build/部署脚本中。 优点是：
- 当请求文件时，它不需要CPU来供Apache进行内容压缩。
- 这些文件在最高压缩级别下被压缩（假设
gzip -9）。 - 您正在从CDN提供文件。
假设您的CSS / JavaScript文件被缩小了（b），并且（b）足够大以certificate在用户机器上解压所需的CPU，那么您可以在这里获得显着的性能提升。
请记住：如果对在CloudFront中caching的文件进行更改，请确保在进行此类更改后使caching无效。
我的答案是关于这个： http : //blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html
build立skyler的答案，你可以上传一个gzip和非gzip版本的CSS和JS。 在Safari中小心命名和testing。 因为safari不会处理.css.gz或.js.gz文件。
site.js和site.js.jgz以及site.css和site.gz.css （您需要将content-encoding标头设置为正确的MIMEtypes才能正确使用它们）
然后在你的页面放。
<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; 这testing，以确保浏览器可以处理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压缩。 公告，所以这是不再需要的。 亚马逊公告
Cloudfront支持gzip。
Cloudfront通过HTTP 1.0连接到您的服务器。 默认情况下，一些networking服务器（包括nginx）不会为HTTP 1.0连接提供压缩内容，但可以通过添加以下内容来告诉它：
gzip_http_version 1.0
到你的nginxconfiguration。 可以为您使用的任何Web服务器设置等效的configuration。
这确实有一个副作用，使保持活动连接不适用于HTTP 1.0连接，但由于压缩的好处是巨大的，这绝对是值得的权衡。
采取从http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/
编辑
提供通过亚马逊云端正在飞行的内容是很危险的，可能不应该这样做。 基本上如果你的web服务器是gzip的内容，它不会设置一个内容长度，而是发送数据分块。
如果Cloudfront和您的服务器之间的连接中断并过早切断，则Cloudfront仍会caching部分结果，并将其作为caching版本，直至到期。
首先在磁盘上进行gzip的接受的答案，然后服务gzip版本是一个更好的主意，因为Nginx将能够设置Content-Length标题，所以Cloudfront将放弃截断的版本。
我们最近对uSwitch.com进行了一些优化，以压缩我们网站上的一些静态资产。 虽然我们设置了一个完整的nginx代理来完成这个任务，但我也放了一个Heroku应用程序来代替CloudFront和S3来压缩内容： http : //dfl8.co
鉴于可公开访问的S3对象可以使用简单的URL结构访问， 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
昨天亚马逊宣布了新function，你现在可以在你的发行版上启用gzip。
它与s3一起工作，而你自己没有添加.gz文件，我今天尝试了新的function，它的工作很好。 （需要使你当前的对象无效）
更多信息
您可以将CloudFrontconfiguration为自动压缩某些types的文件并提供压缩文件。
请参阅AWS 开发者指南
