Мобильная
версия

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

Дата: Категория: JavaScript

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

Сжимаем 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 и т.п.), поэтому можно смело туда пихать любые файлы.

Теги: #JavaScript, # CSS, # Оптимизация

Ваша оценка:

Рейтинг: 10.0 (Оценок: 2)

Комментарий:

Copyright © DOC_tr 2015-2017 г. Все права защищены
Яндекс.Метрика
Перейти к мобильной версии