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

Ігор Грегорченко

23.09.2020 12:42

Минификация (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% от размера запроса.

Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.