Comment combiner JS/CSS pour Amazon S3?

Question

Sur un site VPS normal, j'utiliserais Minify pour compresser et combiner plusieurs fichiers CSS/JS afin que le site n'utilise que 1 ou 2 requêtes HTTP. Un site sur lequel je travaille a maintenant ses fichiers CSS/JS hébergés sur Amazon S3 et servis via Amazon CloudFront. Évidemment Minify est une application PHP5 et ne peut pas fonctionner sur AWS.

Je peux compresser les scripts facilement avant le téléchargement, mais quel est le meilleur moyen de combiner des scripts sur AWS S3 pour réduire les requêtes HTTP?

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

Answer 1

Minify combine et minifies JS/CSS à la volée. S3 et CloudFront servent les fichiers statiques - vous devrez les combiner et les réduire vous-même avant de les télécharger. C'est assez simple - concattez les fichiers ensemble et réduisez-les avec YUI Compressor ou Google Closure Compiler (2 minifieurs de ligne de commande multiplateformes gratuits).

Il est généralement pratique d'avoir un script ou construire étape qui fait cela, quelque chose comme:

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

Sous Windows, une autre excellente option est Microsoft's Ajax Minifier.

Answer 2

Lorsque CloudFront reçoit un appel de cache froid, il demande le contenu au serveur d'origine configuré de la distribution. Dans la plupart des cas, un compartiment S3 est configuré comme origine. La façon la plus simple est donc de combiner et de réduire votre JS et CSS pour le stocker dans S3 dans le cadre de votre processus de construction/déploiement.

Si vous voulez vraiment réduire à la volée, vous pouvez configurer CloudFront pour utiliser une "Origine personnalisée". Dans cette configuration de distribution, les appels de cache à froid seront demandés à votre serveur exécutant Minify.

Voir la documentation de CloudFront sur creating distributions pour plus de détails.

Answer 3

Si vous envisagez de diffuser du contenu statique à partir de S3/CloudFront, je vous recommande de compresser votre contenu à l'avance. Personnellement, j'utilise Juicer. Une fois que vous avez fait cela, vous pouvez gzip -9 vos fichiers de production, et les télécharger sur S3 avec un en-tête Content-Encoding: gzip.

Le problème avec la compression à la volée est le coup de performance que votre site prend. La prise en charge de l'origine personnalisée de CloudFront allège un peu ce problème, mais il serait très facile d'automatiser vos déploiements avec un outil comme Capistrano qui fait ce travail pour vous. C'est l'approche que je prends, moi-même.

Answer 4

Nouveau - Prise en charge de la compression Gzip pour Amazon CloudFront, Check here.

Activation Gzip

Vous pouvez activer cette fonctionnalité dans une minute! Il suffit d'ouvrir la console CloudFront, de localiser votre distribution et de définir Automatiquement les objets Compress sur Oui dans les options de comportement: