Javascript bestanden verkleinen met Dojo ShrinkSafe
In mijn laadtijd meting met Firebug, hebben we gemerkt dat de javascript-bestanden van mijn website naar verhouding vrij groot zijn. Tijd om daar wat aan te doen, zodat pagina's (ook bij een eerste bezoek) wat sneller inladen. Eens kijken of Dojo ShrinkSafe een oplossing biedt.
Dojo ShrinkSafe
Een handige tool hiervoor is Dojo ShrinkSafe. Er zijn twee varianten: een online variant of een programma dat je op je computer installeert. Ik maak even gebruik van de online versie. De werking is eenvoudig:
1) Maak een backup van je huidige javascript bestanden.
2) Upload je javascript bestanden naar de website.
3) Herhaal dit voor ieder bestand dat je wilt comprimeren. Dojo ShrinkSafe maakt er nl een nieuw bestand van.
4) Bekijk of het effect heeft.
5) Controleer nu of het bestand nog valide is. In mijn situatie was er 1 duidelijke fout die ik met behulp van de javascript validatie van Eclipse direct kon opsporen en verbeteren.
6) Als alles klopt, vervang dan de originele bestanden door het nieuwe bestand.
7) Pas eventuele verwijzingen op je webpagina ook aan.
8) Test je site grondig! Dus doe dit allemaal eerst op een testserver.
9) Als alles goed werkt, pas dan je live website aan.
Hoe werkt het?
De code die Dojo ShrinkSafe genereert vervangt regeleinden e.d., maar vervangt ook variabelen en namen door veel kortere variabele; je code is dus niet langer leesbaar! Bewaar je oude code!
function hasTextValue(objForm) {
var returnCode = false;
if (objForm == null) {
alert("Fatal error: could not find form " + sFormId);
} else {
for(i=0; i< objForm.elements.length; i++)
{
if(objForm.elements[i].type=="text")
{
if(objForm.elements[i].value.length > 0) {
returnCode = true;
}
}
}
}
return returnCode;
}
wordt
var _33=false;
if(_32==null){
alert("Fatal error: could not find form "+sFormId);
}else{
for(i=0;i<_32.elements.length;i++){
if(_32.elements[i].type=="text"){
if(_32.elements[i].value.length>0){
_33=true;
}
}
}
}
return _33;
}
Het effect
De laadtijd van de diverse script kon ik inderdaad verkleinen met 38KB. Interessant genoeg dus!
Nadelen
Er kleven wel nadelen aan compressie.
1) Niet alleen zijn je bestanden niet meer te lezen (en wordt eventuele fouten opsporen dus lastig), maar ook moet je bij wijzigingen je bestanden opnieuw comprimeren. Dus extra werk!
2) Gebruik je extra bibliotheken, zoals prototype en scriptaculous, dan zul je ook de bestandsnamen wat moeten aanpassen zodat de diverse onderdelen goed inladen.
Meer lezen
De documentatie van Dojo ShrinkSafe.
