Compresser les fichiers Javascript et CSS

Les applications Ajax ne cesse de progresser et elles utilisent de plus en plus de code Javascript et CSS pour fonctionner, parfois même des centaines de ko...
La démocratisation des applications Ajax ne cesse de progresser. Il suffit pour s'en convaincre de regarder le nombre d'applications web qui sortent jour après jour: stockage en ligne, gestion des comptes personnels, webmail, bureautique, etc. La marche vers les "Dynamic Webtop Application" est en cours !

Ces applications utilisent de plus en plus de code Javascript et CSS pour fonctionner, parfois même des centaines de ko. Afin d'optimiser le trafic réseau et le temps de chargement d'une page web, il est nécessaire de réduire au maximum la taille de ces fichiers.

Cet article présente quelques solutions et pistes.

JavaScript Lint est un validateur de syntaxe Javascript. Il permet de repérer les erreurs de syntaxe, mais aussi les constructions pouvant poser des problèmes (ex : les if() sans accolades). Ce logiciel est basé sur le moteur JavaScript du navigateur Firefox.

Une version en ligne est proposée directement sur le site web, ainsi que différentes distributions permettant d'utiliser cet outil en ligne de commande ou de l'intégrer directement dans son IDE favori.

www.javascriptlint.com

Dean Edwards Packer est un compresseur/obstrurateur de code source JavaScript. Je l'utilise essentiellement pour supprimer les blancs et les commentaires (utiliser pour cela le niveau de compression "none"). Cet outil est utilisable directement en ligne.

dean.edwards.name/packer/

Une fois les blancs et les commentaires supprimés, on peut utiliser l'outil Memtronics, lui aussi disponible directement en ligne. Cet outil est un réducteur/obscurateur/encodeur de code JavaScript (obscurateur pas encore disponible). Les options que j'utilise pour compresser mes fichiers sont Method = better et Hardcore sélectionné.

Je conseille d'utiliser cet outil en ligne avec Internet Explorer, qui attend plus longtemps que Firefox avant de réagir lorsqu'un script prend beaucoup de temps à s'exécuter.

hometown.aol.de/_ht_a/memtronic/MemTronic_CruncherCompressor.html


Version Taille Ratio
Originale 69.5 Ko 100%
Nowhitespace 52.2 Ko 75.1%
Compressée 19.6 ko 28.2%

The W3C CSS Validation Service: jigsaw.w3.org/css-validator/

Pour cela j'utilise le module Python slimmer.py, qui permet d'optimiser également du code HTML, XHTML et JavaScript. www.issuetrackerproduct.com/Download#slimmer

Afin de ne pas surcharger la page d'accueil en chargeant l'ensemble des fichiers JavaScript et CSS nécessaires à l'application, il est possible de charger du code dynamiquement seulement lorsque c'est vraiment nécessaire.
Voici un exemple d'implémentation de cette fonctionnalité (avec Prototype.js):

   var loaded_files = $A(); // fichier JS et CSS déjà chargés 
    
   /** 
   * Chargement dynamique de fichiers JavaScript ou  CSS
   * 
   * @param {String} url Url du fichier JavaScript ou CSS à charger
   */ 
   function loadFile(url){  
       if (loaded_files.indexOf(url) == -1) { 
           // le fichier n'a pas encore était chargé 
            
           // ajout dans la balise HEAD 
           var head = document.getElementsByTagName("head").item(0); 
           var file; 
            
           if (url.indexOf(".css") != -1) { 
               // chargement d'un fichier CSS 
               file = document.createElement("link"); 
               file.setAttribute("rel", "stylesheet"); 
               file.setAttribute("type", "text/css"); 
               file.setAttribute("media", "all"); 
               file.setAttribute("href", url); 
               head.appendChild(file); // ajout effectif 
               loaded_files.push(url); // mémoire 
                            
           } else if (url.indexOf('.js') != -1) { 
               // chargement d'un fichier JavaScript 
               file = document.createElement("script"); 
               file.setAttribute("type", "text/javascript"); 
               file.setAttribute("src", url); 
               file.setAttribute("charset", "iso-8859-1"); 
               head.appendChild(file); // ajout effectif 
               loaded_files.push(url); // mémoire 
           } 
       } 
   } 
En conclusion, je citerai deux autres pistes non traitées dans cet article mais permettant d'accélérer encore le chargement d'une page web:
  • Fusionner tous les fichiers JavaScript à charger en un seul (idem pour les CSS). Le but est de réduire le nombre de requêtes HTTP.
  • Nettoyer et compresser à la volée le code HTML renvoyé par le serveur, via le module gzip du serveur web Apache par exemple.
Add comment

Vous pouvez ajouter un commentaire en complétant le formulaire ci-dessous. Le format doit être plain text. Les commentaires sont modérés.

Question: five x 3 =
Votre réponse: