Potreba komprimovať JavaScript vznikla spolu s vývojom veľkých JavaScript frameworkov, ktoré postupom času rástli do stoviek kilobytov. Problematiku veľkých JavaScript súborov sme tiež museli riešiť, aby sme dosiahli čo najrýchlejšie odozvy stránok. Na začiatku bolo nutné nájsť vhodný kompresor. A takto dopadlo naše hľadanie.

Technológia kompresie

Pre komprimácií JavaScriptu sa používajú techniky založené na nahradzovaní reťazcov inými reťazcami. Niečo ako huffmanova kompresia alebo LZ77, len v inom. Techniky si podrobnejšie rozoberieme.

Kratšie názvy premenných

Väčšina kompresorov pracuje na základe nahrádzania názvov premenných kratšími názvami. Napríklad namiesto

dokument.getElementById

sa môže použiť

var _a  =  dokument.getElementById;
Pričom v ďalšom texte používame všade _a namiesto dokument.getElementById.
Nahradením dlhšieho reťazca za kratší, sa dosahuje zmenšenie súboru. Pričom stále nie je nutné použiť dekompresor.
To je prvá úroveň kompresie. Jednotlivé kompresory sa mierne líšia práve zostavovaním tabuľky skrátených kódov alebo hašov.

Odstránenie whitespaces

Čiže odstránenie enterov, medzier, tabulátorov. Nie je tu veľmi čo vymýšľať. Jednoduchý regulárny výraz rieši tento problém.

Odstránenie poznámok

Ak máte kód dobre komentovaný, týmto ušetríte dosť podstatnú časť veľkosti súboru. Poznámky koncového užívateľa vôbec nezaujímajú.

Kratšie názvy funkcií

Je to obdoba skracovania názvov premenných. Pri nahradení názvov funkcií nastáva však problém, keď funkcie obsiahnuté v kóde voláte zo súboru, ktorý ste nekoprimovali. Z vašej funkcie showDialogWindow sa totiž stane niečo ako _b. Túto technológiu používa napríklad Google Closure kompresor v ADVANCED móde. Táto technológia vyžaduje mierne úpravy kódu.

Kratšie všetko

Tokenizer hľadá v texte čo najväčšie reťazce a tie nahradí kratšími kódmi. Táto kompresia je známa ako Huffmanova alebo LZ77 kompresia. Komprimujú sa čo najväčšie reťazce za čo najkratšie. Táto metóda dosahuje najlepšie výsledky komprimácie. Tento typ kompresie podporuje len Packer. Jej jediná nevýhoda je nutnosť mať dekompresor. Dekomprimovanie prebieha na strane užívateľa a zaberie nejaký čas. Rádovo stotiny sekúnd.

Optimalizácia kódu

Optimalizáciou sa myslí napríklad vynechanie časti kódu, ktorý sa nikdy nemôže vykonať. Alebo sa nahradí kód var a = new Array() za var a = []; Tieto optimalizácie vedú občas k chybám. Preto si výsledný súbor vždy ešte otestujte. Najviac týchto optimalizácií obsahuje Google Closure Compressor.

DOJO ShrinkSave

Popis: Dojo ShrinkSave vznikol spolu s frameworkom DOJO, ktorý je jeden z najrozsiahlejších JavaScript frameworkov vôbec. Netreba sa preto diviť, že vývojári združení okolo tohto projektu prišli s vlastným kompresorom.
Shrinksafe nemá žiadne vstupné prepínače (Okrem nastavenia JavaScript verzie). ShrinkSafe si nainštalujete stiahnutím shrinksafe balíčku. Stačí ho rozpakovať a môžete ho začať používať.
Príkaz na kompresiu: java -jar shrinksafe.jar dojo.js > dojo-shrinksave.js
Technológia: JAVA
Demo URL: http://shrinksafe.dojotoolkit.org/
URL: http://shrinksafe.dojotoolkit.org/

Google Closure Compiler

Popis: Všetky Google aplikácie sú spracované práve týmto nástrojom. Ponúka dva základné módy kompresie simple a advance. Pri advance dosahuje naozaj výborné výsledky. Len kód je nutné mierne upravovať. Viac o problematike sa dočítate na http://code.google.com/closure/compiler/docs/api-tutorial3.html
Ani tento kompilátor netreba inštalovať stačí stiahnuť ZIP súbor a rozpakovať jeden JAR súbor.
Google Closure má veľmi veľa rôznych mikrooptimalizácií. Tie mikro optimalizácie však občas spôsobia nefunkčnosť výsledného súboru. Hlavne keď používate príkazy with{} alebo eval().
Technológia: JAVA
Príkaz na kompresiu: java -jar compiler.jar --js dojo.js --js_output_file dojo-google.js
Demo URL: http://closure-compiler.appspot.com/home
URL: http://code.google.com/closure/compiler/docs/gettingstarted_ui.html

JSMin

Popis: Kompresor obsahuje len základné optimalizácie, ktoré sú popísané aj na stránke projektu. Program sa už dlhšie nevyvíja. Posledná verzia je z roku 2003.
Technológia: C++, PHP existuje aj implementácia v JavaScript-e
Príkaz na kompresiu: jsmin.out < dojo.js > dojo-jsmin.js
Demo URL: http://compressorrater.thruhere.net/
URL: http://www.crockford.com/javascript/jsmin.html, https://github.com/rgrove/jsmin-php/ - PHP verzia

Packer

Popis: Tento kompresor funguje na trochu inom princípe. Celý súbor rozdelí na reťazce a tie si dá do hašovacej tabuľky. Do výsledného súboru si uloží hašovaciu tabuľku a potom samotné nahradené reťazce. V podstate ide o LZ77 kompresiu. Pri tomto type kompresie je však nutný aj dekompresor. Kvôli použitej technológií parsovania je nutné ukončovať funkcie znakom ; čo nie je veľmi bežné. Kompilátor obsahuje niekoľko prepínačov, ktoré dokážu zlepšiť mieru kompresie. V teste sme použili niekoľko nastavení. Čo je zaujímavé, je možné ho kombinovať s inými kompresormi. Len treba predtým upraviť kód z prvého kompresora do podoby ktorú Packer vyžaduje.
Príkaz na kompresiu: php example-file.php (súbor bol upravený)
Technológia: .NET, PERL, PHP.
Demo URL: http://dean.edwards.name/packer/
URL: http://dean.edwards.name/packer/

UglifyJS

Popis: Celkom zaujímavý nový kompresor s celkom zaujímavými nastaveniami. Oproti Google Closeure neobsahuje žiadne mikro optimalizácie kódu. Na druhú stranu sa to občas môže hodiť. Celý je písaný v JavaScripte, takže sa dá veľmi rýchlo implementovať online. Posledná verzia je s 08.2010. Na to že má kód len 23 KB dosahuje naozaj veľmi dobré výsledky.
Príkaz na kompresiu: bin/uglifyjs dojo.js -o dojo-uglifyjs.js
Technológia: JavaScript
Demo URL: http://marijnhaverbeke.nl/uglifyjs
URL: https://github.com/grayrest/UglifyJS

YUI Compressor

Popis: Kompresor z dielne Yahoo. Tento produkt používa Yahoo pre svoje aplikácie. Okrem iného dokáže optimalizovať CSS. Tak ako DOJO shrinksave je založený na Rhino tokenizéri. Má celkom rozsiahle možnosti nastavenia úrovne kompresie. Posledná verzia je z roku 10.2009. Bolo by načase spraviť menší update.
Príkaz na kompresiu: java -jar yuicompressor-2.4.2.jar dojo.js -o dojo-yui.js
Technológia: JAVA
Demo URL: http://compressorrater.thruhere.net/
URL: http://yuilibrary.com/projects/yuicompressor/

Výsledky

Čísla hovoria jasne. Do jednej skupiny možno zaradiť JSMin, DOJO ShrinkSave a YUI Compressor. Trochu sklamal DOJO ShrinkSave, od ktorého sme očakávali lepšie výsledky. Prekvapil nás UglifyJS, ktorý na minime kódu dokáže zraziť veľkosť naozaj impozantne. Držíme autorovi palce pri ďalšom vývoji. K top produktom patrí Google Closure Compressor a Packer. Packer nech je nastavený, akokoľvek podáva naozaj veľmi dobré výsledky. Predsa len LW77 je trochu iná káva. Nestačí mu ani Google nastavený na mód ADVANCE_COMPRESSION. Úplne najlepšie výsledky dosiahnete keď skombinujete Google a Packer. Aj keď táto forma je najnáročnejšia na úpravy kódu a možné chyby. Rozumný pomer námaha / veľkosť kódu poskytuje Google Closure Compressor v SINGLE móde, kde stačí súbor len skomprimovať a začať používať. Nezabudnite, že môžete výsledný súbor ešte skomprimovať cez GZIP 

Linky

http://compressorrater.thruhere.net/ - Otestuje kompresiu online v rôznych kompresoroch. Škoda že tam chýba Google Closure.
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Function_Declarations_Within_Blocks – Odporúčania aké formátovanie používať pri písaní JavaScript kódu. Potrebné keď chcete aby váš kód na 100% fungoval vo všetkých prehliadačoch a s Google Closure Compressorom.