Arek Wałczyk - Wpisy, które warto poczytać

Minify – Sympatyczne narzędzie dla Web-Designerów

Czwartek, 21 lutego 2013 godzina 8:45 Programowanie
Minify – Sympatyczne narzędzie dla Web-Designerów

W wielu projektach WWW dochodzi do momentu, że pliki tekstowe takie jak PHP, JS czy arkusze stylów CSS zaczynają przybierać spore rozmiary. Generalnie w niczym to nie przeszkadza, ale co się dzieje kiedy witryna posiada kilkadziesiąt zapytań w ciągu sekundy, a do wczytania jest kilka lub kilkadziesiąt takich plików. Z pomocą przychodzą wówczas różnorakie techniki i narzędzia do optymalizacji. Dziś omówię prosty skrypt o nazwie Minify.

Dlaczego warto optymalizować

Największe witryny na świecie w ciągu sekundy muszą odpowiedzieć nawet na kilka tysięcy zapytań. Myślę teraz o popularnej Wikipedii, której to serwery pracują nieustannie na dość wysokich obrotach, ale przy tym nie koniecznie szczególnie się męczą. Czy możecie sobie wyobrazić ich działanie gdyby nagle odciąć ich od możliwości „cachowania” zapytań do baz danych oraz kompresowania zwracanej treści w locie? Z doświadczenia wiem, że nawet najtęższe serwery i łącza odmówiłyby posłuszeństwa.

Jednakże w tym wpisie nie będę omawiał techniki, takiej jak na przykład owe buforowanie wyników zapytań bazodanowych, czy pakowania zwracanej treści po stornie serwera. Zwrócę jednak uwagę na bardzo proste i praktyczne narzędzie, które z pewnością miło zaskoczy projektantów stron WWW, którzy jeszcze z podobnych narzędzi nie korzystali.

Minify to kompresor różnorakiego kodu. Obsługuje pliki CSS oraz JS. Do plików PHP istnieją oczywiście podobne rozwiązania, ale w tym wpisie skupię się na optymalizacji arkusza stylów.

Skrypt dostępny jest online pod tym linkiem: Minify CSS Compresor

Jak to działa?

Zasada działania jest oczywiście banalna. Załóżmy zatem, że mamy swój kod CSS na przykład ja posłużę się takim wstukanym na szybko nic nie robiącym arkuszem.

body{
	font-family: Arial;
	font-size: 12pt;
	color: #ffffff;
	margin: 0;
}

.main{
	font-size: 12pt;
	color: #ff0000;
}

.container{
	font-size: 12pt;
	color: #ff0000;
}

.super-container{
	font-size: 12pt;
	color: #ff0000;
}

.submain{
	color: #ff0000;
	margin: 0;
}

.mycalss{
	overflow: hidden;
}

.newstyleclass{
	font-family: Georgia;
	margin: 15px;
	overflow: hidden;
}

W powyższym przykładzie trzy klasy (main, container i super-container) mają identyczną zawartość. W trakcie pisania dużych arkuszy stylów to się przytrafia i może łatwo zostać przeoczone. I tutaj z pomocą przychodzi kompresor, który po włączeniu funkcji „Regroup selectors: Merge selectors with the same properties”, czyli złączanie selektorów klas z identycznymi własnościami, wyłapie każde takie powtórzenie i scali je do kupy. Dodatkowo można aktywować funkcję kompresowania kolorów oraz wielu innych właściwości. Poniższy przykład został zoptymalizowany w trybie „Standard” polegającym na zachowaniu równowagi pomiędzy czytelnością, a objętością.

body {
font-family:Arial;
font-size:12pt;
color:#fff;
margin:0;
}

.submain {
color:red;
margin:0;
}

.mycalss {
overflow:hidden;
}

.newstyleclass {
font-family:Georgia;
overflow:hidden;
margin:15px;
}

.main,.container,.super-container {
font-size:12pt;
color:red;
}

Przyjrzyjmy się teraz jak będzie wyglądał kod w trybie „High”, który zmniejsza czytelność kodu, ale proporcjonalnie do objętości całego pliku. Dodatkowo aktywowałem również funkcję, która usuwa średnik w ostatniej właściwości selektora.

body{font-family:Arial;font-size:12pt;color:#fff;margin:0}
.submain{color:red;margin:0}
.mycalss{overflow:hidden}
.newstyleclass{font-family:Georgia;overflow:hidden;margin:15px}
.main,.container,.super-container{font-size:12pt;color:red}

A co jeśli chcemy upchnąć wszystko w jedną linijkę, gdyż zupełnie nie zależy nam na jakiejkolwiek czytelności kodu? Nie ma problemu – tryb „Higest” zrobi to szybko i precyzyjnie. Oto nasz kod po zastosowaniu największej kompresji.

body{font-family:Arial;font-size:12pt;color:#fff;margin:0}.submain{color:red;margin:0}.mycalss{overflow:hidden}.newstyleclass{font-family:Georgia;overflow:hidden;margin:15px}.main,.container,.super-container{font-size:12pt;color:red}

Oczywiście w przypadku tak małej objętości pliku wszystko jest widoczne, ale wyobraźcie sobie odczyt arkusza liczącego sobie kilkaset linijek po przetworzeniu do takiego stopnia, gdzie praktycznie usuwane są znaki nowej linii.

Podsumowanie i wnioski

Po zastosowaniu zabiegu kompresji udało się zmniejszyć objętość pliku CSS prawie o połowę. Skrypt po każdym cyklu informuje o tym, ile zawartości udało się odciąć od arkusza. Narzędzie może być świetnym uzupełnieniem w przypadku kiedy zależy nam na optymalnym działaniu serwisu cieszącego się dużą popularnością, ale również pozwoli zachować porządek w kodzie co czyni je praktycznym dla każdego.

Podstawową wadą może być możliwość grupowania do kupy tylko tych selektorów, które posiadają identyczne wszystkie właściwości, a nie na przykład wybieranie z poszczególnych selektorów pojedynczych własności, które się powtarzają.

Jednakże skrypt daje możliwość wprowadzania własnego szablonu przetwarzania co czyni go jeszcze bardziej konfigurowalnym, a jego użyteczność sprawia, że bez względu na wspomnianą wadę jest on godny uwagi.

Komentarze oraz dyskusja na temat wpisu

Rangle pisze: Piątek, 24 czerwca 2016 godzina 23:15

Thank you so much for this aricelt, it saved me time!

Napisz swój komentarz

Twoje zdanie na ten temat również mnie interesuje. Podawanie adresu e-mail nie jest wymagane.