Blog webdeveloperski Patryk yarpo Jar

Kompresja kodu JS – Shrinksafe

Autor wiadomości Styczeń 31, 2011

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

Komentarze (1) Trackbacks (0)
  1. Bardzo pomocne narzędzia. Dzięki za zbiór linków w jednym miejscu.


Leave a comment

 

Brak trackbacków.