Минификация js/css/html
Минификация (minify) — это простой подход для уменьшения размеров файлов css, js и html. В процессе сжатия все комментарии к коду, переносы строк, лишние табы и пробельные символы удаляются. Это позволяет сэкономить 10…20% от оригинального размера файла.
CSS и Javascript
Существует целая куча инструментов, которые решают эту задачу для CSS и JS файлов. Например, YUI компрессор от Yahoo. Вы просто запускаете утилиту, которая сохранит обработанную копию в файл:
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
HTML
С HTML чуть сложнее, т.к. эту задачу придется выполнить в самом приложении. Это будет иметь смысл, если размер Ваших HTML файлов превышает 10 КБ. Тогда экономия может быть ощутимой. На PHP это может выглядеть так:
<?php
function sanitize_output($buffer) {
$search = array(
'/\>[^\S ]+/s',
'/[^\S ]+\</s',
'/(\s)+/s'
);
$replace = array(
'>',
'<',
'\\1'
);
$buffer = preg_replace($search, $replace, $buffer);
return $buffer;
}
ob_start("sanitize_output");
?>
<html>
<body>
...
Функция sanitize убирает непечатные символы из HTML перед его выводом
Для автоматизации работы стоит использовать PHP Minify.
Как это делается на практике
Вам нужно готовить минифицированные копии всех Ваших CSS/Javascript/HTML файлов. Обычно это делается на этапе выкатки новой версии:
- Получение всех требуемых файлов.
- Минификация, например с помощью YUI compressor.
- Выкатка на продуктив.
Убедитесь, что запросы с продуктива будут поступать на минифицированные файлы:
<script src="/min.jquery.js"></script>
PHP скрипт, который найдет все JS/CSS файлы в папке и минифицирует их с названием “min.” + название файла:
<?
$path = '.';
$yui_path = 'yui.jar';
$list = array();
function minify_project($dir)
{
$files = glob( $dir, GLOB_NOSORT );
foreach ( $files as $file ) if ( in_array( pathinfo( $file, PATHINFO_EXTENSION ), array('css', 'js') ) )
{
echo $file . "\n";
exec( 'java -jar ' . $yui_path . ' --charset utf-8 ' . $file . ' -o ' . (dirname($file) . '/min.' . basename($file)) );
}
else if ( is_dir($file) )
{
minify_project( $file . '/*' );
}
}
minify_project($path . '/*');
Укажите $path к папке с проектом и $yui_path к скрипту yui
Самое важное
Обязательно минифицируйте JS и CSS, т.к. эта простая операция экономит 10…20% объема данных. Минифицируйте HTML только если он достаточно велик и занимает не менее 10% от размера запроса.
Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: