Кэширование js сжатием gzip

Опубликована: 11 июня 2008, kurapov.name/technology/web/cache_js_with_gzip/

Кэширование js сжатием gzip

Cache — временные данные или устройство по их хранению, созданные для ускорения чтения/записи. Все программисты это знают. Ускорение загрузки web-сайтов тема обширная, начинающаяся с сервера и заканчивающаяся клиентом. К сожалению я не нашёл более-менее подходящих решений по объединению и кэшированию js-кода, поэтому к своему блогу я написал свою схему, о которой вкратце и расскажу.

Существует сжатие «packer», которое убирает все символы форматирования и переименовывает имена функций и переменных в js и предоставляет т.н. minified-версию скрипта. Все с этим прекрасно знакомы на примере больших библиотек jQuery, TinyMCE, prototype. Кроме того что код становится совершенно не читаемым, это может вызвать неработоспособность кода, когда имена переменных динамические.

Моя идея простая — разделять js/css по файлам разработчикам надо для поддержания модульной структуры. Обычно я в контроллере создаю список файлов, которые надо присоединить к данному документу, вместо того чтобы прописывать это вручную в темплейте. Но теперь надо сделать так, чтобы до показа темплейта вызывалась функция кэширования, которая проходилась бы по списку, проверяла из них локальные файлы на время изменения, объединяла в один файл и создавала или перезаписывала gz-файл с именем, сформированным из md5-хэша имен входящих файлов.

Всё просто и в сумме заняло часа 4 на раздумье. Привожу метод cache_js из класса Controller.

function cache_js(){
	$arrNewJS=array();
	$strHash='';
	$strGzipContent='';
	$intLastModified=0;

	//проходимся по списку файлов
	foreach ((array)$this->scripts as $file){
		if (substr($file,0,5)=='http:') continue;
		if ($file[0]=='/') $strFilename=sys_root.$file;
		else $strFilename=sys_root.'app/front/view/'.$file;
		$strHash.=$file;

		//читаем содержимое в одну строку
		$strGzipContent.=file_get_contents($strFilename);
		$intLastModified=$intLastModified<filemtime($strFilename) ? filemtime($strFilename) : $intLastModified;
	}
	$strGzipHash=md5($strHash);
	$strGzipFile=sys_root.'app/front/view/js/bin/'.$strGzipHash.'.gz';

	//проверяем, надо ли перезаписать gz-файл
	if (file_exists($strGzipFile) && $intLastModified>filemtime($strGzipFile) || !file_exists($strGzipFile)){
		if (!file_exists($strGzipFile)) touch($strGzipFile);

		//используем функции встроенной в php библиотеки zlib для архивации
		$gz = gzopen($strGzipFile,'w9');
		gzputs ($gz, $strGzipContent);
		gzclose($gz);
	}

	//перезаписываем список на один файл
	$arrNewJS[]='js/bin/'.$strGzipHash.'.gz';
	$this->scripts=$arrNewJS;
}

Про css я писать не стану, идея аналогичная. Единственный вопрос в автоматизации кэширования и в порядке входящих файлов. Впрочем, в результате сжатия 5 запросов превратилось в 1, а суммарный размер уменьшился в 3 раза.