Fusionner et compresser les fichiers JS et CSS côté serveur

Auteur：Eve Cole Date de mise à jour：2010-06-14 18:58:46

2Fusionner et compresser les fichiers JavaScript et CSS côté serveur

L'une des meilleures pratiques les plus importantes pour l'optimisation des performances Web consiste à réduire les requêtes HTTP, et c'est également la règle la plus importante dans YSlow. Les solutions pour réduire les requêtes HTTP incluent la fusion de fichiers JavaScript et CSS, les sprites CSS, les images cliquables et l'utilisation d'URI de données pour encoder les images. Les sprites CSS et le mappage d'images sont désormais largement disponibles, mais en raison de la non-prise en charge des URI de données par IE6 et IE7 et de problèmes de performances, cette technologie n'a pas été largement utilisée. À l'heure actuelle, le nombre de fichiers JavaScript et CSS dans la plupart des pages Web est le même qu'au moment du développement. Un petit nombre de pages Web seront fusionnées localement en fonction de la situation réelle. Un grand nombre de ces fusions sont effectuées manuellement de manière sélective. Chaque nouvelle fusion doit être refaite localement. La réalisation et le téléchargement sur le serveur sont relativement simples et fastidieux, et la compression du même fichier présente une situation similaire. Grâce à la fusion et à la compression côté serveur, nous pouvons réduire au maximum la granularité des fichiers selon la logique de développement et utiliser les règles d'URL de la page Web pour fusionner et compresser automatiquement les fichiers, ce qui sera assez flexible et efficace.

Gestionnaire de combo YUI

En juillet 2008, l'équipe YUI a annoncé qu'elle fournirait le service Combo Handler pour les composants JavaScript YUI sur YAHOO CDN! Combo Handler est un module Apache développé par Yahoo!, qui permet aux développeurs de combiner simplement et commodément des fichiers JavaScript et CSS via des URL, réduisant ainsi considérablement le nombre de demandes de fichiers. Par exemple, l'utilisation du composant Rich Text Editor de YUI2 sur une page nécessite l'introduction de plusieurs fichiers JavaScript. Les méthodes courantes sont les suivantes :

Après avoir utilisé le service Combo Handler, le code ci-dessus peut être écrit comme suit :

En plus de réduire légèrement la lisibilité du code, l'utilisation du service Combo Handler réduit considérablement le nombre de requêtes HTTP et réduit également la quantité de code URL, ce qui est crucial pour l'optimisation des performances Web. Par conséquent, à partir de YUI 2.6.0, son composant principal, YUI Loader, dispose d'une fonction de gestion des combos intégrée. Autrement dit, lors de l'utilisation de YUI Loader, en configurant l'attribut combine, plusieurs fichiers JavaScript ou CSS à charger peuvent être chargés dans le fichier. forme d'utilisation du service Combo Handler Combined, tant que le serveur de fichiers statique prend en charge Combo Handler. Dans YUI, lorsque combine est configuré sur true, le CDN utilise par défaut Yahoo! ( http://yui.yahooapis.com ), il n'y a donc aucun problème. C'est l'une des parties les plus charmantes de YUI.

Malheureusement, la vitesse de http://yui.yahooapis.com en Chine n'est pas très bonne. À l'origine, Yahoo Chine fournissait http://cn.yui.yahooapis.com/ , mais il n'a pas encore fourni le service Combo Handler. dans le même temps, pour diverses raisons, ses mises à jour sont bloquées depuis YUI 2.7.0. Le pire, c'est que même si le module Apache développé par Yahoo! pour prendre en charge Combo Handler est apparemment prévu pour être open source, il s'agit toujours d'une technologie privée, du moins pour le moment. Pour l'utiliser, vous devez implémenter vous-même des fonctions similaires. il n'y a pas beaucoup d'applications de technologies similaires en Chine.