Kompresja kodu JS – Shrinksafe
Shrinksafe jest aplikacją napisaną w Javie [o otwartych źródłach], dzięki której można zmniejszyć rozmiar plików JS wysyłanych do przeglądarki.
Jak to działa?
Javascript jest językiem parsowanym po stronie przeglądarki. Kod:
var nazwaZmiennejBardzoDluga = 1; // komentarz sialalalala alert(nazwaZmiennejBardzoDluga);
w wyniku nie różni się niczym od takiego kodu:
var a=1;alert(a)
Oba wyświetlą w wyniku alert z komunikatem "1".
Shrinksafe pozwala zrobić to automatycznie. Tak, nie tylko usunie komentarze i niepotrzebne białe znaki. Zmieni także nazwy zmiennych lokalnych, skracając je. Oczywiście, taki kod będzie mniej czytelny. Jednak szybciej się będzie ładował, a i może nawet odrobinę szybciej wykonywał
Step by step
1. Pobierz program
Na stronie http://shrinksafe.dojotoolkit.org/ znajdziesz link do programu. Są to źródła, oraz plik `shrinksafe.jar'.
O samym frameworku dojo więcej przeczytasz we wpisie "quick start dojo".
2. Odpal program
Aby odpalić program skorzystaj z wiersza poleceń.
Przejdź do odpowiedniego katalogu, do którego rozpakowałeś pobrane źródła i binarki. (Zakładam, że już jesteś w odpowiednim katalogu) Wpisz:
F:\shrinksafe>java -jar shrinksafe.jar -help
W wyniku powinieneś zobaczyć:
F:\shrinksafe>java -jar shrinksafe.jar -help
Dojo ShrinkSafe 2.0 $Rev: 19538 $
Usage: java -jar shrinksafe.jar [options...] [files or urls]
Valid options are:
-?, -help Displays help messages.
-escape-unicode Use Javascript \u#### notation for non-ASCII Characters.
-js-version n Sets the version of Javascript used. See the -version
option in Rhino for info. e.g. 100|110|120|130|140
-stripConsole [ normal | warn | all ]
If not specified, all console calls are left alone.
normal - all console calls except warn and error are stripped.
warn - all console calls except error are stripped.
all - all console calls are stripped.
Możesz później potestować wykorzystanie odpowiednich flag, ja pokażę najprostsze wykorzystanie.
3. Wykorzystaj
Skompresujemy plik z kodem biblioteki jQuery (pobierz). Zakładam, że umieściłeś go w tym samym katalogu (u mnie pod nazwą `jquery-devel.js'), w którym masz shrinksafe'a. Wykonaj zatem takie polecenie w wierszu poleceń:
F:\shrinksafe>java -jar shrinksafe.jar jquery-devel.js > jquery-min.js
Rezultaty
Plik zmniejszony w ten sposób ma rozmiar 97,7 KB (100 114 bytes) wobec pierwotnych 178 KB (183 184 bytes), co daje bezwględnie oszczędność 81 KB przy każdym wysłaniu, co stanowi ok. 45%. Warto? Myślę, że tak. Oczywiście kod stracił na czytelności.
Nieczytelny kod
Oczywiście, kod JS stracił na czytelności. Jednak nie ma się co przejmować - takiego kodu nie będziemy zmieniać. Trzymamy dwie wersje - jedna "deweloperska", druga - "produkcyjna".
Warto przeczytać: