How to write compressible JavaScript

Yoan BlancSun, 21 Jan 2007, ,

If you ever tried to use the Packer of Dean Edwards, you probably constating that your script don’t work anymore. It happens to me and I found what did I do wrong.

This cool tool that compress and obfuscate your Javascript code do, at first, an inlining operation. NB: I use the PHP5 script. If Javascript is very cool about syntax, it isn’t anymore when code is inlined. In the following example I will put the mandatory semicolons (;) for uncompressed script in bold. These semicolons are required in inlined code.

var a=0;
var b=2;

if(a > b) {
	var text = "a is bigger than b";
	console.warn(text)
}

for(var i=0; i<b;i++)
	console.log(i + "/" + b);

function C(value) {
	var c = value
}

C.prototype.compare = function(value) {
	if(this.c == value)
		return 0;
	else if(this.c > value)
		return 1;
	else
		return -1
};

Every ; can be removed if you don’t want to compress your JS file.

By the way an intersting project called Fork Javascript that aims to get the best of Prototype and YUI.

Ayant récemment dû corriger certains des scripts Javascript que j’ai écrit pour qu’il soit aisément comprimable par le merveilleux outil développé par Dean Edwards nommé Packer, voici une rapide explication de comment s’y prendre.

Le packer en question va tout d’abord mettre le code JavaScript sur une ligne, supprimer les commentaires avant de le compresser. Hélas pour que l’interpréteur puisse lire du code en ligne il faut qu’il soit convenable écrit, donc avec des point-virgules (;) là où c’est nécessaire.

Le code ci-contre est truffé de points-virgule mis en gras (;). Ceux-ci ne sont pas nécessaire dans cette forme là et peuvent être aisément supprimés sans affecter l’évaluation du script mais son requis si le dit script est voué à être compressé.

Les buts de la compression sont : le gain de bande passante (des points de vue du client et du serveur) et l’offuscation (cacher un minimum comment est fait le code, bien que...).