compress JavaScript code – compressor

Kompresja kodu JavaScript jest gotową funkcją PHP która za pomocą wyrażeń regularnych usuwa zbędne znaki ze skryptu JavaScript co powoduje zmniejszenie jego rozmiaru. Skutkiem tego jest przyspieszona obsługa skryptu (jego wykonanie) jak i szybsze wczytanie pliku se skryptem lub strony z osadzonym skryptem w znacznikach <script></script> co powoduje także zmniejszenie zużycia transferu, który jest wymagany do wysłania nie skompresowanego kodu w pliku do klienta (przeglądarki).

Działanie można przetestować na: Kompresja JavaScript

Aktualnie usuwane lub zamieniane są zbędne rzeczy takie jak

Tabulator Pionowy – vertical tab – 0×0B (\x0B)
Znak powrotu karetki – 0×0D (\r, \x0D)
Tabulatory zmienia na pojedynczą spację – TAB – 0×09 (\t, \x09)
Każdą podwójną spację (i więcej np. 3, 4 i tak dalej) zamienia na pojedynczą 0×20 – (\x20)
Wszystkie komentarze
Pojedyncze spacje tylko w określonych miejscach (określonych w zmiennej $char_js)
Ewentualnie przejścia do nowych linii – 0×0A (\n, \x0A)

Domyślnie nie są usuwane spacje powiązane ze zmienną $char_js oraz przejścia do nowych linii!!! Można uzyskać ten efekt przekazując odpowiednie wartości do funkcji.

function compress_javascript($js_code,$special_chars=false,$remove_new_lines=false) {
/*********************
//
//Compress JavaScript by tosiek - https://tosiek.pl/
//
*********************/
//
// Arrays
//
//array with pattern
	$pattern=array(
		//remove carriage return
		"/\x0D/",
		//remove vertical tab
		"/\x0B/",
		//Replace tabulators to one space
		"/\x09{1,}/si",
		//Replace more then one spaces to once
		"/\x20{2,}/",
		//Remove JS comments and HTML
		'/((?:\/\*(?:[^*]|(?:\*+[^*\/]))*\*+\/)|(?:\/\/.*))/','/<!--.*?-->/si',
	);
	if($special_chars==true) {
	//Special JavaScript characters after and before the spaces are removed
		$char_js='(|)|=|;|:|?|\'|"|+|-|\*|\/|%|!|<|>|&|\|[|]|{|}';
		//remove spaces with $char_js, after and before
		$pattern[]="/([{$char_js}]+)\x20/";
		$pattern[]="/\x20([{$char_js}]+)/";
	}
	if($remove_new_lines==true) {
		$pattern[]="/\x0A/";
	}
	//array with replacement
	$replacement=array(
		//remove carriage return
		'',
		//remove vertical tab
		'',
		//Replace tabulators to one space
		"\x20",
		//Replace more then one spaces to once
		"\x20",
		//Remove JS comments and HTML
		'','',
	);
	if($special_chars==true) {
	//remove spaces with $char_js, after and before
		$replacement[]='$1';
		$replacement[]='$1';
	}
	if($remove_new_lines==true) {
		$replacement[]='';
	}
	$start=strlen($js_code);
	//Compress JS with regular expressions
	$replace=preg_replace($pattern,$replacement,$js_code,-1);
	// strlen() after compress
	$final=strlen($replace);
	//counts the difference in characters
	$exhed=$start-$final;
	//counts the difference in percentages
	$compression=round(($exhed)/$start*100,2);
	return $replace."\n//Before compress $start bytes; After compress: $final bytes; $exhed ({$compression}%)";
}

Przykładowe użycie funkcji bez dodatkowych wartości (bez usuwania spacji oraz nowych linii)

<?php
$code='if ( top.location  !=  self.location   )
	{ 
top.location.href =  self.location;
}';
$code = compress_javascript($code);
echo $code;
?>

Wyświetli nam:

if ( top.location != self.location )
 { 
top.location.href = self.location;
}
//Before compress 82 bytes; After compress: 77 bytes; 5 (6.09999999999999964472863%)

Lecz nadal widać zbędne spację więc podajmy funkcji jako drugi argument wartość prawda (true) co spowoduje usunięcie zbędnych spacji przy znakach specjalnych

$code = compress_javascript($code,1);

Da nam efekt:

if(top.location!=self.location)
{
top.location.href=self.location;
}
//Before compress 82 bytes; After compress: 68 bytes; 14 (17.0700000000000002842171%)

Do zupełnej kompresji kodu możemy dodać trzeci argument, który usuwa znaki nowych linii (tylko dla znawców JavaScript)

Usuwanie znaków specjalnych i nowych linii

$code = compress_javascript($code,1,1);

da efekt:

if(top.location!=self.location){top.location.href=self.location;}
//Before compress 82 bytes; After compress: 65 bytes; 17 (20.7300000000000004263256%)

Usuwanie nowych linii, bez usuwania spacji obok znaków specjalnych

$code = compress_javascript($code,0,1);

da efekt:

if ( top.location != self.location ) { top.location.href = self.location;}
//Before compress 82 bytes; After compress: 74 bytes; 8 (9.75999999999999978683718%)

compress CSS code – compressor

Kompresja kodu CSS, gotowa funkcja PHP która za pomocą wyrażeń regularnych usuwa zbędne znaki z kaskadowego arkusza stylów – CSS tym samym zmniejszając jego rozmiar, co prowadzi do szybszego wczytania strony (stylów) jak i zmniejszenia zużycia transferu (należy pamiętać że plik ze stylem jest wczytywany z każdym żądaniem przeglądarki, dlatego nawet mała różnica rozmiaru ma znaczenie)

Działanie można przetestować na: Kompresja CSS

Aktualnie funkcja usuwa wszystko co nie potrzebne, zachowuje składnię CSS. Dzięki zachowaniu składni arkusz po kompresji będzie działał prawidłowo.

Aktualnie usuwane zbędne rzeczy takie jak:

Tabulatory – TAB – 0×09 (\t, \x09)

Tabulator Pionowy – vertical tab – 0×0B (\x0B)

Znak nowej linii – 0×0A (\n, \x0A)

Znak powrotu karetki – 0×0D (\r, \x0D)

Puste znaki – 0×00 (\0, \x00)

Każdą podwójną spację (i więcej np. 3, 4 i tak dalej) 0×20 0×20 – (\x20\x20)

Każdą pojedynczą spację, lecz tylko w wybranych i dozwolonych miejscach (zmienna $char_css)

Wszystkie komentarze

Skraca kolory o ile to możliwe w zapisie HEX z np. z #aaffaa na #afa

Usuwa średnik z ostatniej reguły, ponieważ jest zbędny

Zostało dodane usuwanie zbędnych spacji po znaku @ (małpa) oraz zmiana tabulatorów od jednego w górę na pojedynczą spację, oraz zamiana spacji od dwóch w górę na jedną

function compress_css($css_code) {
/*********************
//
//Compress CSS by tosiek - https://tosiek.pl/
//
*********************/
//Special CSS characters after and before the spaces are removed
//do not use ')' !!! - this causes a bug in Internet Explorer
	$char_css='{|}|(|;|:|,|\'|"|@';
	//pattern to shortening hex colour
	$hex_char='[a-f0-9]';
	//
	// Arrays
	//
	//array with pattern
	$pattern=array(
		//new lines(\n and \r)
		"/\x0A/","/\x0D/",
		//vertical tab and tab
		"/\x0B/","/\x09{1,}/",
		//NULL bytes (\0)
		"/\\x00/",
		//double spaces and more, more
		"/\x20{2,}/",
		//remove spaces with $char_css, after and before
		"/([{$char_css}]+)\x20/","/\x20([{$char_css}]+)/",
		//remove all comments
		"!/\*[^*]*\*+([^/][^*]*\*+)*/!",
		//short hex colour
		"/#({$hex_char})\\1({$hex_char})\\2({$hex_char})\\3/i",
		//remove last ';'
		"/;}/",
	);
	//array with replacement
	$replacement=array(
		//new lines(\n and \r)
		'','',
		//vertical tab and tab
		'',"\x20",
		//NULL bytes (\0)
		'',
		//double spaces and more, more
		"\x20",
		//remove spaces with $char_css, after and before
		'$1','$1',
		//remove all comments
		'',
		//short hex colour
		'#\1\2\3',
		//remove last ';'
		"}",
	);
	// strlen() before compress
	$start=strlen($css_code);
	//Compress CSS with regular expressions
	$replace=preg_replace($pattern,$replacement,$css_code,-1);
	// strlen() after compress
	$final=strlen($replace);
	//counts the difference in characters
	$exhed=$start-$final;
	//counts the difference in percentages
	$compression=round(($exhed)/$start*100,2);
	//Return compress CSS code with info (comment) in new line
	return $replace."\n".'/* Poczatkowy rozmiar: '.$start.' bajtow; Po kompresji: '.$final.' bajtow; Zmniejszono o: '.$exhed.' bajtow ('.$compression.'% procent) */';
}

przykładowe wykorzystanie z użyciem pliku style.css:

<?php
$style = file_get_contents(dirname(__FILE__).'style.css');
$style = compress_css($style);
echo $style;
?>

Podany powyżej kod po wywołaniu go, wyświetli nam skompresowany kod z pliku style.css wraz z informacją o rozmiarze przed i po kompresji oraz oszczędności w procentach.

/* Poczatkowy rozmiar: 37 bajtow; Po kompresji: 14 bajtow; Zmniejszono o: 23 bajtow (62.16% procent) */

Przykładowy kod przed kompresją (należy zwrócić uwagę na niewidoczne znaki takie jak spacje, tabulatory i przejścia do nowych linii – entery)

	*  {
margin:   0		 6;
  }

Oraz po kompresji:

*{margin:0 6}
/* Poczatkowy rozmiar: 37 bajtow; Po kompresji: 13 bajtow; Zmniejszono o: 24 bajtow (64.86% procent) */

Top Posts & Pages

Najnowsze komentarze

Tag: compression