Obfusquer, minifier et compresser du javascript - Javascript

Cela fait un moment que je souhaitai compresser le javascript de ce site et aujourd'hui j'ai décidé de m'atteler à cette tâche.

Le but recherché n'est absolument pas de cacher ou protéger le code javascript de ce site mais simplement d'optimiser le temps de chargement des pages.

Avant de me lancer dans l'explication technique je souhaitais clarifier quelques points sur ces techniques et leur vocabulaire.

Obfuscation du javascript

Obfusquer un code permet de le rendre illisible, la méthode consiste à remplacer du code facilement compréhensible en un code alambiqué en modifiant les notations (bloc de code), en changeant les noms de variable (Exemple : la variable counter devient x), ou en encore en modifiant les algorithmes.

Le but initial de l'obfuscation du code est de protéger le javascript du vol mais obfusquer le code permet aussi de réduire la taille de ce dernier en raccourcissant les noms de variables.

Compression du code javascript

Parler de compression est ici un abus de langage qui rassemble toutes les autres techniques décrites ici. La compression du javascript doit être réalisée par le serveur http en activant la compression gzip (Voir : Activer la compression gzip sur lightty).

Compactage et minification du javascript

Minifier ou compacter le code javascript consiste à retirer tous les espaces et les retours à la ligne inutiles du code. La technique de compactage rend aussi le code moins lisible et participe à la protection contre le vol.

Compression de javascript avec Yuicompressor

Yuicompressor est un logiciel java créer par Yahoo qui permet de minifier et obfusquer le code javascript facilement.

Pour utiliser Yuicompressor il faut bien entendu installer java et ensuite télécharger Yuicompressor.

Une fois l'archive zip décompressée la commande pour lancée la compression est la suivante :

pcr@home:~$ java -jar /chemin/vers/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --type js --charset utf-8 --line-break 1000 -o /chemin/vers/fichier-compressé.js /chemin/vers/fichier-a-compresser.js

• --charset : permet de spécifier l'encodage du fichier (ici utf-8)
• --line-break : permet de limiter le nombre de caractères sur une même ligne (choisi arbitrairement par mes soins)
• --type : permet de spécifier que l'on souhaite compresser du javascript (Yuicompressor compresse aussi le css)
• -o : permet de spécifier le fichier de sortie

Exemple de compression

Voici un exemple de code javascript avant compression :

function displayClassElement(rootElement,className)
{
  var elmnt;
  nodes = new Array();
  if(typeof(rootElement) == 'string')
  {
  elmnt = document.getElementById(rootElement);
  }
  else
  {
  elmnt = rootElement;
  }
  if(elmnt.cells != undefined)
  {
  nodes = elmnt.cells;
  }
  else
  {
  if(elmnt.rows != undefined)
  {
   nodes = elmnt.rows;
  }
  else
  {
   if(elmnt.childNodes != undefined)
   {
   nodes = elmnt.childNodes;
   }
  }
  }
  for(var i = 0; i < nodes.length; i++)
  {
  if(nodes[i].tagName != undefined)
  {
  displayClassElement(nodes[i],className);
  if(nodes[i].className == className)
  {
  nodes[i].style.display = getDisplayStyle(nodes[i]);
  }
  }
  }
}

Et ce même code javascript après compression :

function displayClassElement(a,d){var c;nodes=new Array();if(typeof(a)=="string"){c=document.getElementById(a)}else{c=a}if(c.cells!=undefined){nodes=c.cells}else{if(c.rows!=undefined){nodes=c.rows}else{if(c.childNodes!=undefined){nodes=c.childNodes}}}for(var b=0;b<nodes.length;b++){if(nodes[b].tagName!=undefined){displayClassElement(nodes[b],d);if(nodes[b].className==d){nodes[b].style.display=getDisplayStyle(nodes[b])}}}};

Références :

• Wikipedia : Minification (en)
• Wikipedia : Code impénétrable (fr)
• Jargon Français : obfusquer

Image : 802