Сжатие html-кода

Используя компьютер мы довольно часто прибегаем к сжатию информации. Мы используем архивы, что бы уменьшить объем фотографий передаваемых через почту. Мы сжимаем еженедельные бэкапы. Используем для изображений формат jpg вместо tiff. Включаем на веб-серверах сжатие gzip, которое позволяет значительно сократить размер передаваемых страниц. Все эти меры принимаются для достижения двух целей. Быстрее передавать информацию по сети и сохранить как можно боле свободного места на дисках.

На сайтах, для ускорения передачи данных сжимают объем файлов с клиентским кодом. Здесь сжатие заключается в удалении ненужных символов. В этот список входят символы переноса строк, табуляции, повторяющиеся пробелы и пр. Умные "сжиматели" умеют даже преобразовывать стили и объединять селекторы. Например:

.margin5
{
    magin:5px 5px 5px 5px; 
}

Будет сокращен и вытянут в одну строку:

.margin5{magin:5px}

Получается из 40 символов стало всего 19, это на 52.5% меньше от исходного объема.

Посмотрев на опыт коллег, которые сжимают JavaScript и CSS, я решил решил попробовтаь уменьшить и саму разметку страницы. Я написал регулярное выражение, которое удаляет повторяющиеся пробелы, табуляцию, переносы строк. Код прекрасно вытягивался в одну строку и экономил мне примерно килобайт на каждом запросе. Но тут же я получил и пару проблем, о них подробнее.

1. Вытягивание инлайнового джаваскрипт кода может его испортить, если в нем присутствуют комментарии, поскольку строки, идущие после него также считаются комментарием. Приведу пример, не сжатый код:

function foo()
{
    var bar = 'text';//comment
}

После сжатия закрывающая скобка окажется в теле комментария и функция будет считаться не закрытой.

function foo(){var bar = 'text';//comment}

Таким образом вы получите ошибку в консоли, джаваскрипт "упадет" и больше никогда не будет работать. Есть три пути решения этой проблемы:

1. Не сжимать джаваскрипт
2. Не ставить комментарии

3. Удалять комментарии перед сжатиемЯ решил в обязательном порядке удалять комментарии и опционально не сжимать джаваскрипт. Для последнего я вывел отдельную опцию compressScript, которая позволяет выбрать предпочтительный для вас вариант.

4. Вторая проблема появляется, когда используются примеры кода с подсветкой на стороне клиента. Яркий пример приведен выше. Если вытянуть в одну строку содержимое тега code, то и на странице он будет отображаться в одну строку. Для того, что бы избежать таких проблем, я также вывел отдельную опцию compressCode. Обе опции по умолчанию включены, то есть весь ваш код будет сжат.

5. Третью проблему я заметил, когда попытался отредактировать статью. Текст я пишу не в визуальном редакторе, а в обычном textarea. Открыв статью для редактирования, я увидел что текст, как и исходный код, вытянут в одну строку. И эту проблему я учел. Компрессор просматривает отдаваемый ему контент и, если встречает там тег textarea, - не сжимает его содержимое.

В основном я разрабатываю сайты на фреймворке yii и все расширения пишу под него. Но это можно использовать и любом другом проекте, на другом фреймворке или вообще без него.

Дополнительные ссылки:
Инструкция на русском
Репозиторий и инструкция на английском