Over het comprimeren van JavaScript-code
Stel: je hebt een mooi JavaScript ontwikkeld. Je stelt dat beschikbaar aan gebruikers van je website, maar je wilt niet dat Jan & Alleman er aan gaat zitten wijzigen. Dan heb je een probleem, want in de praktijk is dat maar nauwelijks mogelijk. Toch kun je het voor de meeste webontwikkelaars behoorlijk lastig maken.
Hieronder zie je een eenvoudig stukje JavaSript. Het zorgt ervoor dat het figuurtje
wordt getoond tot aan de datum
die je opgeeft in de parameter expiredate van de function expireat().
/* "Whats new?" image script-By JavaScript Kit (www.javascriptkit.com) */
var imagetag='<img src="../images/new.gif" width="30" height="17" border="0" alt="Nieuw, vers van de pers">';
var today=new Date();
function expireat(expiredate) {
var expire = new Date(expiredate);
if (today.getTime() <= expire.getTime()) document.write(imagetag);
}
Dit script is prima leesbaar en eenvoudig te begrijpen.
Hieronder staat hetzelfde script nog een keer, maar nu zijn alle commentaren, spaties en lege regels verwijderd. Het hele
script is op één lange regel gezet (hier is die ene regel verdeeld over meerdere regels, om te laten zien hoe
het script er nu uit ziet).
var imagetag='<img src="../images/new.gif" width="30" height="17" border="0" alt="Nieuw, vers van de pers">';var today=new Date;function expireat(expiredate){var expire=new Date(expiredate);if(today.getTime()<=expire.getTime())document.write(imagetag)};
Het is nog goed leesbaar, maar het is al moeilijker om te begrijpen wat het doet. Deze techniek heet minimaliseren
(minimize in het Engels). Het voordeel van deze aanpak is het script veel kleiner wordt waardoor het sneller laadt.
Deze aanpak wordt vaak gebruikt voor de productie-versies van JavaScript-bibliotheken, zoals jQuery.
Hieronder staat het eerste script nog een keer, maar nu als een soort adacadabra:
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[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}('2 4=\'<9 g="../h/1.e" i="c" a="b" d="0" f="q, r s j p">\';2 5=1 6();o k(3){2 7=1 6(3);l(5.8()<=7.8())m.n(4)}',29,29,'|new|var|expiredate|imagetag|today|Date|expire|getTime|
img|height|17|30|border|gif|alt|src|images|width|de|expireat|if|
document|write|function|pers|Nieuw|vers|van'.split('|'),0,{}))
Alle drie de scripts doen hetzelfde, maar de onderste uitvoering is onbegrijpelijk geworden.
De Engelse aanduiding voor de hierbij gebruikte techniek is obfuscate. Dat betekent zoveel als: verduisteren,
verwarren of verbijsteren. Hier wordt gesproken over versleutelen.
Bij deze aanpak worden eerst de spaties, lege regels en commentaren verwijderd, net zoals bij minimaliseren. Daarna wordt
het script versleuteld. Het programma om te ontsleutelen is in het script verwerkt. Het wordt gedraaid zodra het script is
geladen, zodat de browser er mee aan de slag kan. De extra terugvertaalslag maakt het script wel trager.
Terugvertalen
Een geminimaliseerd script kan eenvoudig worden teruggezet naar leesbare code. Commentaren uit het oorpspronkelijke script
zijn door de minimalisatie-actie echter verloren gegaan. Zie hier onder.
var imagetag='<img src="../images/new.gif" width="30" height="17"
border="0" alt="Nieuw, vers van de pers">';
var today = new Date;
function expireat(expiredate) {
var expire = new Date(expiredate);
if (today.getTime() <expire.getTime()) document.write(imagetag)
};
Een versleuteld script kan niet meer worden terugvertaald naar leesbare code. Als je de broncode van een versleuteld script niet (meer) hebt, kun je het dus ook niet(meer) aanpassen.
Toepassing
In de praktijk wordt minimaliseren vaak toegepast. Er zijn diverse websites waarmee je je script online kunt minimaliseren,
bijvoorbeeld:
www.toptal.com/developers/javascript-minifier.
Versleuteling wordt minder ingezet. Als je het zelf wilt gebruiken moet je de werking grondig testen om zeker te stellen dat het script nog goed werkt. Een website waar je je script online kunt versleutelen is obfuscator.io/.
Een site die in dit verband niet mag ontbreken is www.cleancss.com/javascript-beautify/. Hier kun je je zelf-ontwikkelde JavaScript- en jQuery-code online laten fatsoeneren: Witregels, (consequent) inspringen, enz.
Toepassing
Het bovengenoemde websites kun je behalve JavaScript ook CSS en HTML-code minimaliseren. Het versleutelen van CSS- en HTML-code
is echter niet mogelijk.
Behalve JavaScript zelf kun je ook code die van een bibliotheek gebruik maakt versleutelen, bijvoorbeeld jQuery
of Modernizr.
Tenslotte
Scripts op deze site die je geheel of gedeeltelijk op deze manier zou kunnen behandelen zijn:
