Dans cette rubrique, nous discuterons de différentes méthodes pour optimiser notre code JavaScript.
La compression de votre code JavaScript va vous permettre de créer des fichiers plus légers et donc plus faciles et rapides à télécharger. La compression doit toujours s'effectuer en dernière étape de votre développement, une fois que vous avez parfaitement testé votre code JavaScript et que ce dernier est prêt pour être utilisé en "production". Il existe différents types de compresseurs de code JavaScript que l'on peut classer en 2 grandes catégories :
compresseurs (ex JSMin) qui se contentent de supprimer les caractères superflus de votre code comme les espaces ou les commentaires. Ce type de compresseurs est généralement moins performant mais possède l'avantage de ne pas nécessiter un respect strict des normes de codage JavaScript. En d'autres termes, en utilisant un compresseur "non obstrusif" vous aurez beaucoup plus de chance que votre code JavaScript compressé fonctionne du premier coup.
compresseurs (ex Packer) qui suppriment tous les caractères superflus et en plus minimisent la taille de tous les mots de votre code. Ce type de compresseurs est généralement plus performant mais nécessite un respect strict des normes de codage pour pouvoir fonctionner.
Ce compresseur JavaScript va tout simplement supprimer tous les caractères inutiles de votre code. Vous trouverez la documentation en ligne à l'adresse http://www.crockford.com/javascript/jsmin.html ainsi qu'une démonstration à l'adresse http://fmarcia.info/jsmin/test.html.
// is.js
// (c) 2001 Douglas Crockford
// 2001 June 3
// is
// The -is- object is used to identify the browser. Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be
// Mozilla 4. Netscape 6 claims to be version 5.
var is = {
ie: navigator.appName == 'Microsoft Internet Explorer',
java: navigator.javaEnabled(),
ns: navigator.appName == 'Netscape',
ua: navigator.userAgent.toLowerCase(),
version: parseFloat(navigator.appVersion.substr(21)) ||
parseFloat(navigator.appVersion),
win: navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
is.ie = is.ns = false;
is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
is.ie = is.ns = false;
is.gecko = true;
}
qui donne compressé avec JSMin
var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}
Packer est l'un des plus puissants compresseurs JavaScript. Il se base sur un algorithme très complexe qui transforme totalement votre code pour le rendre le plus condensé possible. Il est particulièrement recommandé pour le code de taille importante alors que JSMin peut s'avérer meilleur pour du code de petite taille. Il est disponible à l'adresse http://dean.edwards.name/packer/ (Pour une compression maximale il faut cocher les cases Base62 encode et Shrink variables) .
Le code précédent compressé avec Packer
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('g 1={4:2.7==\'h i j\',k:2.l(),5:2.7==\'m\',3:2.n.o(),p:8(2.9.q(r))||8(2.9),s:2.t==\'u\'}1.a=1.3.6(\'a\')>=0;b(1.3.6(\'c\')>=0){1.4=1.5=d;1.c=e}b(1.3.6(\'f\')>=0){1.4=1.5=d;1.f=e}',31,31,'|is|navigator|ua|ie|ns|indexOf|appName|parseFloat|appVersion|mac|if|opera|false|true|gecko|var|Microsoft|Internet|Explorer|java|javaEnabled|Netscape|userAgent|toLowerCase|version|substr|21|win|platform|Win32'.split('|'),0,{}))