Используя компьютер мы довольно часто прибегаем к сжатию информации. Мы используем архивы, что бы уменьшить объем фотографий передаваемых через почту. Мы сжимаем еженедельные бэкапы. Используем для изображений формат jpg вместо tiff. Включаем на веб-серверах сжатие gzip, которое позволяет значительно сократить размер передаваемых страниц. Все эти меры принимаются для достижения двух целей. Быстрее передавать информацию по сети и сохранить как можно боле свободного места на дисках.
На сайтах, для ускорения передачи данных сжимают объем файлов с клиентским кодом. Здесь сжатие заключается в удалении ненужных символов. В этот список входят символы переноса строк, табуляции, повторяющиеся пробелы и пр. Умные "сжиматели" умеют даже преобразовывать стили и объединять селекторы. Например:
.margin5
{
magin:5px 5px 5px 5px;
}
Будет сокращен и вытянут в одну строку:
.margin5{magin:5px}
Получается из 40 символов стало всего 19, это на 52.5% меньше от исходного объема.
Посмотрев на опыт коллег, которые сжимают JavaScript и CSS, я решил решил попробовтаь уменьшить и саму разметку страницы. Я написал регулярное выражение, которое удаляет повторяющиеся пробелы, табуляцию, переносы строк. Код прекрасно вытягивался в одну строку и экономил мне примерно килобайт на каждом запросе. Но тут же я получил и пару проблем, о них подробнее.
- Вытягивание инлайнового джаваскрипт кода может его испортить, если в нем присутствуют комментарии, поскольку строки, идущие после него также считаются комментарием. Приведу пример, не сжатый код:
function foo()
{
var bar = 'text';//comment
}
После сжатия закрывающая скобка окажется в теле комментария и функция будет считаться не закрытой.
function foo(){var bar = 'text';//comment}
Таким образом вы получите ошибку в консоли, джаваскрипт "упадет" и больше никогда не будет работать. Есть три пути решения этой проблемы:
- Не сжимать джаваскрипт
- Не ставить комментарии
Удалять комментарии перед сжатиемЯ решил в обязательном порядке удалять комментарии и опционально не сжимать джаваскрипт. Для последнего я вывел отдельную опцию
compressScript
, которая позволяет выбрать предпочтительный для вас вариант.Вторая проблема появляется, когда используются примеры кода с подсветкой на стороне клиента. Яркий пример приведен выше. Если вытянуть в одну строку содержимое тега
code
, то и на странице он будет отображаться в одну строку. Для того, что бы избежать таких проблем, я также вывел отдельную опциюcompressCode
. Обе опции по умолчанию включены, то есть весь ваш код будет сжат.Третью проблему я заметил, когда попытался отредактировать статью. Текст я пишу не в визуальном редакторе, а в обычном textarea. Открыв статью для редактирования, я увидел что текст, как и исходный код, вытянут в одну строку. И эту проблему я учел. Компрессор просматривает отдаваемый ему контент и, если встречает там тег textarea, - не сжимает его содержимое.
В основном я разрабатываю сайты на фреймворке yii и все расширения пишу под него. Но это можно использовать и любом другом проекте, на другом фреймворке или вообще без него.
Дополнительные ссылки:
Инструкция на русском
Репозиторий и инструкция на английском