How to combine JS/CSS for Amazon S3?

Question

On a regular VPS site I would use Minify to compress and combine multiple CSS/JS files so the site's only using 1 or 2 HTTP requests. A site I'm working on now has it's CSS/JS files hosted on Amazon S3 and served through Amazon CloudFront. Obviously Minify is a PHP5 app and not able to run on AWS.

I can compress the scripts easily before uploading but what's the best way to combine scripts on AWS S3 to reduce HTTP requests?

http://code.google.com/p/minify/

Answer 1

Minify combines and minifies JS/CSs on the fly.

S3 and CloudFront serve static files - you'll have to combine and minify them yourself before you upload. It's easy enough - concat the files together and minify with YUI Compressor or Google Closure Compiler (2 free cross-platform command-line minifiers).

It's usually convenient to have a script or build step that does this, something like:

#!/bin/bash
cat a.js b.js c.js | java -jar yuicompressor-1.4.2.jar --type js -o output.min.js

On Windows, another excellent option is Microsoft's Ajax Minifier.

Answer 2

When CloudFront receives a cold-cache hit it requests the content from the distribution's configured origin server. In most cases a S3 bucket is configured as the origin. So the easiest way is to combine and minify your JS and CSS is to store it in S3 as part of your build/deployment process.

If you really want to minify on-the-fly you can configure CloudFront to use a "Custom Origin". In this distribution configuration cold-cache hits would be requested from your server running Minify.

See the CloudFront documentation on creating distributions for details.

Answer 3

If you plan to serve static content from S3/CloudFront, I would recommend compressing your content ahead of time. Personally, I use Juicer. Once you've done that, you can gzip -9 your production files, and upload them to S3 with a Content-Encoding: gzip header.

The problem with compressing on the fly is the performance hit your site takes. CloudFront custom-origin support alleviates this a bit, but it would be really easy to automate your deployments with a tool like Capistrano that does this work for you. This is the approach I take, myself.

Answer 4

New – Gzip Compression Support for Amazon CloudFront, Check here.

Enabling Gzip Compression

You can enable this feature in a minute! Simply open up the CloudFront Console, locate your distribution, and set Compress Objects Automatically to Yes in the Behavior options: