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:

[javascript]var nazwaZmiennejBardzoDluga                =                     1; // komentarz sialalalala
alert(nazwaZmiennejBardzoDluga);[/javascript]

w wyniku nie różni się niczym od takiego kodu:

[javascript]var a=1;alert(a)[/javascript]

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:

[text]F:\shrinksafe>java -jar shrinksafe.jar -help[/text]

W wyniku powinieneś zobaczyć:

[text]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.[/text]

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ń:

[text]F:\shrinksafe>java -jar shrinksafe.jar jquery-devel.js > jquery-min.js [/text]

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ć:

Jedna odpowiedź do “Kompresja kodu JS – Shrinksafe”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *