¿Cómo combinar JS/CSS para Amazon S3?

Question

En un sitio VPS habitual, usaría Minify para comprimir y combinar múltiples archivos CSS/JS de modo que el sitio solo utilizara 1 o 2 solicitudes HTTP. Un sitio en el que estoy trabajando ahora tiene sus archivos CSS/JS alojados en Amazon S3 y servidos a través de Amazon CloudFront. Obviamente, Minify es una aplicación PHP5 y no se puede ejecutar en AWS.

Puedo comprimir las secuencias de comandos fácilmente antes de cargarlas, pero ¿cuál es la mejor manera de combinar las secuencias de comandos en AWS S3 para reducir las solicitudes HTTP?

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

Answer 1

Minify combina y le resta JS/CSS sobre la marcha.

S3 y CloudFront sirven archivos estáticos: tendrá que combinarlos y minimizarlos usted mismo antes de cargarlos. Es bastante fácil: combinar los archivos y minificar con YUI Compressor o Google Closure Compiler (2 minificadores de línea de comandos multiplataforma gratuitos).

Por lo general es conveniente tener un guión o construir paso que hace esto, algo como:

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

En Windows, otra excelente opción es Microsoft's Ajax Minifier.

Answer 2

Cuando CloudFront recibe un golpe de caché fría, solicita el contenido del servidor de origen configurado de la distribución. En la mayoría de los casos, un depósito S3 se configura como el origen. Entonces, la forma más fácil es combinar y minimizar su JS y CSS es almacenarlo en S3 como parte de su proceso de compilación/implementación.

Si realmente desea minimizar al vuelo, puede configurar CloudFront para usar un "Origen personalizado". En esta configuración de distribución, se solicitarán aciertos de caché de su servidor que ejecuta Minify.

Consulte la documentación de CloudFront en creating distributions para obtener más información.

Answer 3

Si va a servir contenido estático de S3/CloudFront, le recomiendo que comprima su contenido antes de tiempo. Personalmente, uso Juicer. Una vez que haya hecho eso, puede gzip -9 sus archivos de producción y subirlos a S3 con un encabezado Content-Encoding: gzip.

El problema con la compresión sobre la marcha es el rendimiento que obtiene su sitio. El soporte de origen personalizado de CloudFront alivia esto un poco, pero sería muy fácil automatizar sus implementaciones con una herramienta como Capistrano que hace esto por usted. Este es el enfoque que tomo yo mismo.

Answer 4

Nuevo - Soporte de compresión Gzip para Amazon CloudFront, Check here.

Habilitación de compresión gzip

Puede activar esta característica en un minuto! Simplemente abra la consola de CloudFront, ubique su distribución y configure Compress Objects Automatically to Yes en las opciones de comportamiento: