Comment combiner des requêtes pour plusieurs fichiers javascript en une requête http?

Question

Ce concept est nouveau pour moi. Je l'ai découvert pour la première fois à l'adresse Configurateur de dépendances YUI . Fondamentalement, au lieu d’avoir plusieurs requêtes pour de nombreux fichiers, ceux-ci sont chaînés en une seule requête http afin de réduire le temps de chargement des pages.

Quelqu'un sait comment implémenter ceci sur une pile LAMP? (J'ai déjà vu une question similaire déjà posée, mais elle semble spécifique .

Merci!

Mise à jour: les deux réponses sont utiles ... (mon représentant n’est pas assez haut pour faire un commentaire, c’est pourquoi j’ajoute quelques pensées de départ ici). Je suis aussi venu sur un autre article de blog avec des exemples spécifiques à PHP qui pourraient être utiles. La réponse de construction de David, cependant, me fait envisager une approche différente. Merci David!

Answer 1

Il y a différentes manières, les deux plus évidentes seraient:

1. Créez un outil tel que YUI, qui crée une version unique sur mesure basée sur les composants que vous avez cochés si nécessaire, de sorte que vous puissiez toujours servir le fichier sous forme statique. MooTools et jQuery UI fournissent tous des constructeurs de paquets comme celui-ci lorsque vous téléchargez leur paquet afin de vous offrir la bibliothèque la plus simple et efficace possible. Je suis sûr qu’il existe un outil générique tout usage.
2. Créez un simple script Perl / PHP / Python / Ruby qui sert un tas de fichiers JavaScript basés sur la requête. Donc, "onerequest.js? Load = ui & load = effects". irait à un script PHP qui charge dans les fichiers et leur sert le type de contenu correct. Il existe de nombreux exemples, mais personnellement, je ne suis pas un fan.

Je préfère ne pas servir de fichiers statiques avec un script quelconque, mais j'aime aussi développer mon code avec une dizaine de petits fichiers de classe séparés sans le coût de 10 requêtes HTTP. Je suis donc arrivé à un processus de construction personnalisé qui combine toutes les classes et fonctions les plus courantes, puis les réduit dans un fichier unique tel que project.min.js. Une condition, dans tous mes affichages / modèles, qui inclut ce fichier lors de la production.

Modifier - Le " processus de construction personnalisé " est en fait un script Perl extrêmement simple. Il lit dans chacun des fichiers que j'ai transmis en tant qu'arguments et les écrit dans un nouveau fichier, en passant éventuellement l'intégralité de l'élément à JSMIN (disponible dans toutes vos langues préférées) automatiquement.

À la commande, elle ressemble à:

perl build-project-master.pl core.js class1.js etc.js /path/to/live/js/file.js

Answer 2

Il y a un bon article sur ce @ http://www.hunlock.com/blogs/Supercharged_Javascript .

Answer 3

Ce que vous voulez, c'est Réduire . Je viens d'écrire une procédure à suivre pour la configuration ça va.

Answer 4

Capistrano est un outil de déploiement Web basé sur Ruby assez populaire. Si vous envisagez de l'utiliser ou l'utilisez déjà, il existe un super bijou qui permettra de comprendre les dépendances CSS et Javascript, de fusionner et de minimiser les fichiers.

gem install juicer

À partir de la page Juicer GitHub , vous pouvez déterminer quels fichiers dépendent les uns des autres et les fusionner. , en réduisant le nombre de requêtes http par page affichée, améliorant ainsi les performances.