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

Небольшая заметка по поводу минификации – что, чем и как.
(немного кода и совсем мало текста)

Сжимаем js/css вместе

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

Находится она на github.
С установкой все просто – скачиваем, распаковываем, и вот у нас уже есть папка min в которой и лежит весь код библ отеки минифицирования.

Теперь о том, как ее использовать.

Минифицирует она по одному файлу – передаем его абсолютное расположение (http://localhost/main.js или /main.js), и выводит на экран его сжатое представление.
Например

file_get_contents('http://localhost/min/min/index.php?f=/min/main.js');

(у меня в корне лежит папка min в которой хранятся минифицированные файлы, и в ней еще папка min уже с библотекой)

А если у нас несколько файлов? Что тогда?
Я храню все файлы js и css в соответствующих папках, поэтому вначале я собираю их всех в одни файл, и после его минифицирую

Данный код подходит только для простых сайтов / сайтов одностраничек.
В больших проектах применять такой подход НЕДОПУСТИМО!

Потому-что в больших проектах огромной множество страниц, скриптов, очень разная везде верстка, и огромные css файлы которые нужны на 2-3 страницах. И если собрать их все вместе, то даже после сжатия, вам вряд ли удастся уменьшить размер который придется браузеру загрузить при отображении страницы.

<?php
echo 'START MINIFY' . "n";

// собираем все файлы css в один
$css = array_diff(scandir(__DIR__ . '/static/css/'), array('.', '..'));
$main_css = '';
foreach($css as $item) {
    if(!preg_match('/css$/', $item)){
        continue;
    }
    $c = file_get_contents('static/css/'.$item);
    $main_css .= $c;
}
file_put_contents('min/main.css', $main_css);

// собираем все файлы js в один
$js = array_diff(scandir(__DIR__ . '/static/js/'), array('.', '..'));
$main_js = '';
foreach($js as $item) {
    if(!preg_match('/js$/', $item)){
        continue;
    }
    $c = file_get_contents('static/js/'.$item);
    $main_js .= "n" . $c;
}
file_put_contents('min/main.js', $main_js);

$host = 'http://localhost';

// минифицируем
echo 'start css minify' . "n";
$main_css = file_get_contents($host . '/min/min/index.php?f=/min/main.css');
file_put_contents('min/main.css', $main_css);
echo 'css minifed' . "n";
echo 'start js minify' . "n";
$main_js = file_get_contents($host . '/min/min/index.php?f=/min/main.js');
file_put_contents('min/main.js', $main_js);
echo 'js minifed' . "n";

Здесь мы из нескольких файлов делаем один, и уже после его минифицируем.
Запускается она простым кодом из командной строки (файл с этим кодом называется min.php и находится в корне)

$ php min.php

Данная библиотека работает также с уже сжатыми файлами (jquery.min.js, angular.min.js и т.п.), поэтому можно смело туда пихать любые файлы.

[Всего голосов: 0    Средний: 0/5]

Минификация js и css: 1 комментарий

  1. А где в данном скрипте минификация происходит? Вы же просто объединяете все css и js в 1 файл, что не является минификацией.

Добавить комментарий

Ваш e-mail не будет опубликован.