Podczas tworzenia dużych projektów stron internetowych webmaster często pisze nawet do kilkudziesięciu skryptów w JavaScript, które łącznie mają nawet po kilka tysięcy linijek. Podobnie sprawa ma się do arkusza stylów CSS. Ważnym elementem przy wdrażaniu serwisu z taką ilością skryptów jest ich kompresja.

JavaScript

Do kompresji skryptów napisanych w JavaScript użyjemy strony, która wykona proces praktycznie natychmiast online http://javascriptcompressor.com/.

W celach demonstracyjnych posłużę się małym skryptem z mojego nowego serwisu PiszSuchary.pl, który odpowiada za głosowanie na obrazki.

[codesyntax lang=”javascript”]

$(document).ready(function() {
	$('div[class|="ocena"]').click(function() {
		var jakaocena = $(this).attr('id');
		jakaocena = jakaocena.split('-');
		var id = jakaocena[2];
		jakaocena = jakaocena[1];

		var co = new Array("jeden", "dwa", "trzy");
		var na_co = new Array("1", "2", "3");
		for(var i=0; i<co.length; i++) {
			jakaocena = jakaocena.replace(co[i], na_co[i]);
		}

		if($('#tekst-ocena-tresc-'+id).html() != "Już głosowano" && $('#tekst-ocena-tresc-'+id).html() != "Dzięki za głos!") {
			$.ajax({
				url: "http://a/suchary/ocen/suchar",
				type: "POST",
				data: "ocena="+jakaocena+"&id="+id,
				success: function(msg) {
					$('#tekst-ocena-tresc-'+id).stop().html(msg);
				}
			});
		}
	});

	$('span[id|="komentarz-ocen"]').click(function() {
		var jakaocena = $(this).attr('id');
		jakaocena = jakaocena.split('-');
		var id = jakaocena[3];
		jakaocena = jakaocena[2];

		var co = new Array("minus", "plus");
		var na_co = new Array("0", "1");
		for(var i=0; i<co.length; i++) {
			jakaocena = jakaocena.replace(co[i], na_co[i]);
		}

		if($('#komentarz-wynik-komunikat-'+id).html() != "Już głosowano" && $('#komentarz-wynik-komunikat-'+id).html() != "Dzięki za głos!") {
			$.ajax({
				url: "http://a/suchary/ocen/komentarz",
				type: "POST",
				data: "ocena="+jakaocena+"&id="+id,
				success: function(msg) {
					if(msg == "Dzięki za głos!") {
						var obecnie = $('#komentarz-wynik-'+id).html();
						if(jakaocena == 1) {
							++obecnie;
						} else {
							--obecnie;
						}
						$('#komentarz-wynik-'+id).stop().text(obecnie);
					}
					$('#komentarz-wynik-komunikat-'+id).stop().html(msg);
				}
			});
		}
	});
});

[/codesyntax]

W powyższej formie zajmuje on 1,7 KB. Po skompresowaniu z opcją „Shrink variables” zajmuje on już 1,3 KB. Dodatkowo opcja „Base62 encode” umożliwia zakodowanie naszego kodu, aby był trudniejszy do odczytania. Wpływa to jednak negatywnie na rozmiar naszego pliku.

[codesyntax lang=”javascript”]

$(document).ready(function(){$('div[class|="ocena"]').click(function(){var b=$(this).attr('id');b=b.split('-');var c=b[2];b=b[1];var d=new Array("jeden","dwa","trzy");var e=new Array("1","2","3");for(var i=0;i<d.length;i++){b=b.replace(d[i],e[i])}if($('#tekst-ocena-tresc-'+c).html()!="Już głosowano"&&$('#tekst-ocena-tresc-'+c).html()!="Dzięki za głos!"){$.ajax({url:"http://a/suchary/ocen/suchar",type:"POST",data:"ocena="+b+"&id="+c,success:function(a){$('#tekst-ocena-tresc-'+c).stop().html(a)}})}});$('span[id|="komentarz-ocen"]').click(function(){var c=$(this).attr('id');c=c.split('-');var d=c[3];c=c[2];var e=new Array("minus","plus");var f=new Array("0","1");for(var i=0;i<e.length;i++){c=c.replace(e[i],f[i])}if($('#komentarz-wynik-komunikat-'+d).html()!="Już głosowano"&&$('#komentarz-wynik-komunikat-'+d).html()!="Dzięki za głos!"){$.ajax({url:"http://a/suchary/ocen/komentarz",type:"POST",data:"ocena="+c+"&id="+d,success:function(a){if(a=="Dzięki za głos!"){var b=$('#komentarz-wynik-'+d).html();if(c==1){++b}else{--b}$('#komentarz-wynik-'+d).stop().text(b)}$('#komentarz-wynik-komunikat-'+d).stop().html(a)}})}})});

[/codesyntax]

Zaoszczędzenie 0.4 KB może nie wydaje się szczególnym sukcesem, jednak jeśli nasza strona ma działać pod dużym obciążeniem to warto zadbać nawet o najmniejsze szczegóły.

CSS

Tak jak w przypadku kompresowania kodu JS do kompresowania stylów CSS skorzystamy z narzędzia online dostępnego pod adresem http://www.csscompressor.com/.

Po zaznaczeniu wszystkich opcji oraz wybraniu z listy „Compression Mode” wartości „Highest” możemy wkleić nasz arkusz stylów.

Skrypt nie tylko ucina niepotrzebne entery, czy spacje, ale także stosuje skrócone deklaracje właściwości.

margin-top: 5px;

margin-right: 5px;

margin-bottom: 5px;

margin-left: 5px;

Zamieni nam na:

margin:5px