Kompresja kodu JavaScript i CSS

pack

Poziom średnio-zaawansowany

Minimalizacja czy też kompresja kodu JavaScript bądź CSS to często spotykana technika, stosowana w celu optymalizacji obciążenia i czasu ładowania strony poprzez zmniejszenie wagi plików z kodem. Dziś postaramy się zwięźle powiedzieć o narzędziach stosowanych do tego celu.

Kompresja kodu JavaScript i CSS

Ostatnio ktoś zapytał mnie o ten temat, stąd dzisiejszy mały artykuł. Możemy sobie wprowadzić zasadę, aby pliki z kodem JavaScript i CSS umieszczać w aplikacji produkcyjnej już skompresowane. Oczywiście zawsze trzymamy pod ręką wersje źródłowe, aby je modyfikować w razie potrzeby.

Do realizacji zadania można użyć jednego z kompresorów. Ja polecam YUI Compressor:

http://yui.github.io/yuicompressor/

Pobieramy i wypakowujemy:

https://github.com/yui/yuicompressor/releases

Uruchamiamy wiersz polecenia i możemy kompresować. Uwaga: jako że narzędzie jest w postaci pliku .jar, potrzebujemy środowiska Java w swoim systemie.

Wywołujemy plik .jar z parametrami plik_wejsciowy.js -o plik_wynikowy.min.js.

Na przykład (uwaga na wersję w nazwie kompresora):

c:\yuicompressor-2.4.8>java -jar yuicompressor-2.4.8.jar gameFramework.js -o gf.min.js –charset utf-8

Otrzymujemy plik wynikowy.

kompresja-kodu-javascript

Aby uniknąć ewentualnych problemów z kodowaniem, dodałem flagę charset.

Do pobrania przykładowy kod – źródło oraz wersja minified:

http://directcode.eu/samples/compress-js-css-code.zip

Pliki CSS kompresujemy w analogiczny sposób.

Kompresor rozpoznaje typ pliku według rozszerzenia; można ponadto użyć flagi –type:

–type js|css
The type of compressor (JavaScript or CSS) is chosen based on the
extension of the input file name (.js or .css) This option is required
if no input file has been specified. Otherwise, this option is only
required if the input file extension is neither ‚js’ nor ‚css’.

Inne rozwiązania

Oczywiście YUI to nie jedyne rozwiązanie, jest masa innych. Dobrym i popularnym narzędziem jest „packer”:

http://dean.edwards.name/packer/

Są także narzędzia dostępne on-line:

http://javascript-minifier.com/

http://cssminifier.com/

Każdy ma swoje preferencje. Grunt to wykonać zadania szybko i skutecznie.

Wersje plików

Przy okazji wspomnę o wersjach plików. Jeżeli dołączamy do projektu pliki .js lub .css (nie koniecznie skompresowane), dobrym trickiem jest doklejenie wersji do jego nazwy. Wersje plików .js i .css mogą być ustawiane w konfiguracji aplikacji.

Przykładowo

dla CSS: … href=”my.css?v=123″ …

dla JS: … src=”myjs.min.js?v=110 …

Pozwoli to uniknąć cache’owania plików przez przeglądarkę, a tym samym sytuacji, gdy użytkownik naszej aplikacji uruchamia ostatnią wersję, ale jego przeglądarka trzyma jeszcze starsze wersje CSS / JS. A nikt przecież nie chce niemiłych niespodzianek.


Podsumowanie

To właściwie wszystko co potrzeba, aby skutecznie kompresować pliki JavaScript i CSS. Sporo bibliotek open-source jest do pobrania zarówno w wersji źródłowej jak i skompresowanej. W przypadku naszego kodu możemy bez problemu zrobić to samo. Uzyskamy mniejszą wagę plików, a ponadto nikt nie zajrzy do naszego kodu – przynajmniej nie tak łatwo.

> java -jar yuicompressor.jar thank_you.js -o thank_you.min.js

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+0Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.