Сокращение HTML

Question

Я погуглил, но не могу найти ни одного HTML-сценария минифации.

Мне показалось, что, возможно, нет ничего более сложного в HTML, чем удаление ненужных пробелов.

Я что-то упустил или мой Google Fu потерян?

Answer 1

Вы должны быть осторожны при удалении содержимого из HTML, так как это хрупкий язык. В зависимости от того, как ваши страницы закодированы, некоторые из этих пробелов могут быть более значительными; также, если у вас есть стили CSS, такие как white-space: pre, вам может понадобиться оставить пробел. Кроме того, в браузере есть множество ошибок и т. Д., И, в основном, каждый символ в файле HTML может соответствовать определенным требованиям или успокаивать браузер.

По моему мнению, вам лучше всего разработать страницы с использованием техник CSS (недавно я смог взять важную страницу на сайте, на котором я работаю, и уменьшить ее размер на 50%, просто перекодировав ее с помощью CSS вместо таблиц и вложенные атрибуты style = "..."). Затем используйте GZip, чтобы уменьшить размер ваших страниц для браузеров, которые понимают gzip. Это позволит сэкономить пропускную способность при сохранении структуры HTML.

Answer 2

Иногда, в зависимости от вложенных тегов и / или CSS, пробелы могут быть значительными.

Answer 3

Я еще не пробовал, но htmlcompressor - это ограничитель HTML, если вы хотите попробовать.

Answer 4

За пределами HTML Tidy / удаление пробелов, как и другие упомянутые ответы, не так много.

Это скорее ручное задание, вытягивающее атрибуты стиля в CSS (надеюсь, вы не используете теги FONT и т. Д.), С использованием меньшего количества тегов и атрибутов, где это возможно (например, не встраивание тегов в элемент, а использование CSS, чтобы сделать весь элемент font-weight: жирным, если, конечно, нет смысла использовать> strong <) и т. Д. </p>

Answer 5

В этом блоге Wordpress есть довольно продолжительное обсуждение этой темы. Там вы можете найти очень длинное предлагаемое решение, используя PHP и HTML Tidy.

Answer 6

Да, я думаю, это в значительной степени удаляет пробелы и комментарии. Вы не можете заменить идентификаторы более короткими, как в javascript, так как есть вероятность, что CSS-классы или javascript будут зависеть от этих идентификаторов.

Кроме того, следует соблюдать осторожность при удалении пробелов и следить за тем, чтобы всегда оставался хотя бы один пробел, в противном случае allyourtextwilllooklikethis.

Answer 7

Вы можете найти несколько хороших ссылок здесь на такие вещи, как HTML tidy и другие.

Если вы не хотите использовать одну из этих опций, Prototype имеет средство для очистки пробела в DOM. Вы можете сделать это самостоятельно и скопировать его через «Просмотр сгенерированного источника» на панели инструментов веб-разработчика расширения Firefox. Затем вы можете заменить оригинальный HTML с исправлением прототипа. Извините, что не сделал этот очевидный ник.

(рекомендую первую ссылку)

Answer 8

Я использовал это регулярное выражение годами без проблем: s/>\s*</></g

В Python re.sub(r'>\s*<', '><', html)

Или в PHP preg_replace('/>\s*</', '><', $html);

Это убрало все пробелы между тегами, но нигде, это довольно безопасно (но не идеально, бывают ситуации, когда это сломается, но они редки).

Моя главная причина для этого не скорость / размер файла, а потому, что пробел часто вводит, ну, в общем, пространство. Это было бы хорошо, но когда вы начинаете копаться в вашем DOM с Javascript, пробелы часто теряются, создавая (незначительные) различия в макете.

Рассмотрим:

<div>
    <a>link1</a>
    <a>link2</a>
</div>

Между ссылками есть пробел, но теперь я делаю что-то вроде:

$('div').append('<a>link3</a>')

А места нет ... Мне нужно вручную добавить место в моем JS, что довольно уродливо и подвержено ошибкам ИМХО.

Answer 9

Вот минификатор для HTML5, написанный на PHP.

<?PHP
$in=file_get_contents('path/to/source.html');

//Strips spaces if there are more than one.
$in=preg_replace('/\s{2,}/m',' ',$in);
//trim
$in=preg_replace('/^\s+|\s+$/m','',$in);
/*Strips spaces between tags. 
Use (&nbsp; or &shy; or better) padding or margin if necessary, otherwise the html
parser appends a one space textnode.*/  
$in=preg_replace('/ ?> < ?/','><',$in);
//Removes tag end slash.
$in=preg_replace('@ ?/>@','>',$in);
//Removes HTML comments except conditional IE comments.
$in=preg_replace('/<!--[^\[]*?-->/','',$in);
//Removes quotes where possible.
$in=preg_replace('/="([^ \'"\=><]+)"/','=$1',$in);
$in=preg_replace("/='([^ '\"\=><]+)'/",'=$1',$in);

file_put_contents('path/to/min.html',$in);
?>

После этого у вас есть одна строка, более короткий HTML-код.

Лучше сделать массив из регулярных выражений, но помнить об обратной косой черте

Answer 10

Недавно я нашел скрипт на основе PHP, который минимизирует ваши сайты. Динамический веб-компрессор