Минификация js/css/html

Минификация (minify) — это простой подход для уменьшения размеров файлов css, js и html. В процессе сжатия все комментарии к коду, переносы строк, лишние табы и пробельные символы удаляются. Это позволяет сэкономить 10...20% от оригинального размера файла. Минификация (minify) css

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 файлов. Обычно это делается на этапе выкатки новой версии:

  1. Получение всех требуемых файлов
  2. Минификация, например с помощью YUI compressor
  3. Выкатка на продуктив

Убедитесь, что запросы с продуктива будут поступать на минифицированные файлы:

<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% от размера запроса.


Подпишитесь на Хайлоад с помощью Google аккаунта
или закройте эту хрень