Блог/Минификация HTML

Минификация HTML кода в Modx Evolution и MODX Revolution

Автор: Кудашев Сергей

Очередное простенькое решение по минификации, на этот раз по минификации HTML для Modx Evolution и MODX Revolution. С одной стороны минификация HTML кода не является обязательным, в отличие от минификации CSS и JS. С другой стороны убрать лишние килобайты из кода HTML страницы не будет лишним.

Единственный момент, на котором еще хочу остановиться, это сам процесс минификации кода, чтобы предать наглядности представленным решениям. Минификация HTML представляет из себя удаление лишних пробелов и других похожих символов. В нашем случае для поиска и подмены данных значений идеально подойдет метасимвол регулярных выражений \s, который включает в себя нужные нам символы (пробел, табуляция, перенос строки, перенос каретки, вертикальная табуляция, перевод формата).

Регулярные выражения – популярная технология, представляющая из себя язык поиска и манипуляций с текстом и отдельными символами, основанный на использовании стандартизованных метасимволов. Самый простой пример использования регулярный выражений, это поиск файлов по маске в командной строке Windows или Unix-подобных систем, когда мы используем символ * для поиска все возможных вариантов файла.

Вооружившись данными знаниями создадим плагины для Evolution и Revolution под названием MinifyHTML, который будет вешаться на событие OnWebPagePrerender.

Минификация HTML для Modx Evolution:

<?php
$e =&$modx->event;
switch ($e->name) {
	case "OnWebPagePrerender":
		//$modx->logEvent('0', 2, 'OnWebPagePrerender minified', 'Minify');
		$pattern = array('/\>[^\S ]+/s','/[^\S ]+\</s','/(\s)+/s');
		$replace = array('>','<','\\1');
		$modx->documentOutput = preg_replace($pattern,$replace,$modx->documentOutput);
		break;
}

Минификация HTML для Modx Revolution:

<?php
$cid = $modx->resource->get('id');
$exclude = $modx->getOption('exclude',$scriptProperties,'12');

if(empty($cid)) { return; }
if(in_array($cid,explode(',',$exclude))) { return; }

$output = &$modx->resource->_output;
$pattern = array('/\>[^\S ]+/s','/[^\S ]+\</s','/(\s)+/s');
$replace = array('>','<','\\1');
$output = preg_replace($pattern,$replace,$output);

Создаем плагин, называем его MinifyHTML, выбираем в качестве события выполнения OnWebPagePrerender. Переходим на любую страницу сайта, смотрим исходный код и видим одну сплошную строку HTML. Все, наш код минифицирован :)

Комментарии (4)

  1. Серый19 июня 2018, 10:06#
    Спасибо, Сергей! А как можно сделать что бы он еще и комментарии зачищал?)
    1. Кудашев Сергей19 июня 2018, 13:19(Комментарий был изменён)#
      С комментариями сложнее, так как они могут использоваться в качестве условных комментариев для поддержки разных вещей в старых браузерах. Поэтому данный функционал я не реализовывал.

      Самое простое решение это в переменную $pattern добавить регулярку: '/<\!--(.*)-->/isU', а в переменную $replace пустое значение, на которое регулярка будет заменяться. Однако сразу предупрежу, что будет вырезать и условные комментарии.
    2. Серый30 июня 2018, 17:46#
      Спасибо, товарищ! Помогло!
      В ответ на то, что могут резаться условняки, я скажу, что мы же русские люди, ёмаё!

      Я сделал регулярку такой:
      '/<\!---(.*)-->/isU'

      и, соответственно, все комментарии, которые не хочу никому показывать такими:
      <\!---Мой стремный каммент с избыточным содержанием девелоперского юмора-->
      Вуаля!

      Остался еще вопрос: когда внутри JS'ки остришь, там комментарий вот такого вида:
      /*Пжжжжжжж*/

      Как такое добавить в массив для вырезания??
      1. Кудашев Сергей03 июля 2018, 00:06#
        Есть простой вариант, это пример из js, но в PHP его легко перевести: https://stackoverflow.com/questions/2458785/regex-to-remove-multi-line-comments
        А есть более сложный вариант, его надо постетировать: https://stackoverflow.com/questions/19509863/how-to-remove-js-comments-using-php

        В общем под свои задачи смотрите :)