Минимизация CSS

Опубликовано VladSavitsky

Решение

Варианты решений

YUI Compressor

YUI Compressor cжимает JS и также может сжимать CSS.
Вот команда сжатия:

java -jar yuicompressor-x.y.z.jar --type css -o имя_сжатого_файла.css имя_сжимаемого_файла.css

Как установить и использовать YUI Compressor

JSMin

JSMin - это маленькая консольная утилита (33 Кб), которая получает на вход код, а на выходе выдаёт код с удаленными комментариями и переносами строк.

В среднем файл сжимается на 40-50%.
Доступные кодировки: ASCII и UTF-8.

Использование JSMin

Такой командой мы передаём этому скрипту текст входного файла, и указываем, куда сложить вывод:

jsmin.exe < in.js > out.js

Упаковка с помощью perl-скрипта

По сравнению с JavaScript CSS упаковывать легко. Поскольку в стилях практически не используются закавыченные строки (как правило, это пути или названия шрифтов), мы можем справиться с пробелами с помощью регулярных выражений. Если же у нас закавыченные строчки все же есть, мы почти всегда можем свести последовательности пробелов к одному пробелу (маловероятно, что последовательности, состоящие из нескольких пробелов, встретятся нам в указаниях путей или названиях шрифтов). Для этого нам вполне хватит простенького скрипта на Perl:

#!/usr/bin/perl

my $data = ‘’;
open F, $ARGV[0] or die "Can’t open source file: $!";
$data .= $_ while <F>;
close F;

$data =~ s!/*(.*?)*/!!g; # remove comments
$data =~ s!s+! !g; # collapse space
$data =~ s!} !}n!g; # add line breaks
$data =~ s!n$!!; # remove last break
$data =~ s! { ! {!g; # trim inside brackets
$data =~ s!; }!}!g; # trim inside brackets

print $data;

"Скормим" этому скрипту все имеющиеся у нас CSS по очереди:

perl compress.pl site.source.css > site.compress.css

С помощью такой несложной оптимизации мы можем уменьшить объем передаваемых данных на 50 процентов (во многом это зависит от вашего стиля кодирования - выигрыш может быть и гораздо меньше), а значит, увеличить скорость работы конечного пользователя. Но в идеале нам хотелось бы, чтобы пользователи вообще не запрашивали файлы до тех пор, пока это не станет совершенно необходимо. И для этого нам придется заняться HTTP-кэшированием.