CodeKitHubЩо це за інструмент?
Мініфікатор HTML видаляє все, що браузеру не потрібно для коректного відображення сторінки: коментарі, зайві пробіли між тегами, зайві атрибути на кшталт type="text/javascript" і опційні закриваючі слеші. Результат — функціонально ідентичний HTML, який завантажується та розбирається швидше.
Цей інструмент побудований на html-minifier-terser, тому самому мініфікаторі, що використовується у популярних інструментах збірки, тож він розуміє структуру HTML, а не сліпо прибирає пробіли — він не торкнеться чутливого до форматування вмісту всередині <pre>, <textarea> чи вбудованих блоків <script>/<style>, а також мініфікує CSS і JS, вбудовані у вашу розмітку.
Навіщо його використовувати?
- Справжній парсер під капотом, а не регулярні вирази — безпечно для граничних випадків на кшталт блоків <pre>, вбудованих скриптів та умовних коментарів.
- Мініфікує також вбудований вміст <style> і <script>, а не лише навколишню розмітку.
- Побачте точно, скільки байтів ви заощадили, перед публікацією файлу.
- Режим форматування перетворює стиснений однорядковий HTML назад у щось, що людина може прочитати й редагувати.
- 100% локальна обробка — ваша розмітка й усе приватне в ній ніколи не залишає ваш браузер.
Як користуватися
- Вставте свій HTML у поле вводу або натисніть "Завантажити приклад", щоб спробувати зразок.
- Натисніть "Мініфікувати", щоб стиснути його, або "Форматувати", щоб впорядкувати з відступом у 2 пробіли.
- Перегляньте повідомлення під полями — режим мініфікації показує зменшення розміру; якщо HTML не вдається розібрати, ви побачите точну помилку замість зламаного результату.
- Натисніть "Копіювати", щоб отримати результат.
Приклад
Введення
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<!-- greeting -->
<p class="greeting">
Hello, world!
</p>
</body>
</html>Результат
<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>Коментарі, відступи та розриви рядків видаляються; doctype скорочується. Видима сторінка відображається ідентично.
Практичні поради
- Мініфікуйте безпосередньо перед розгортанням, а не під час розробки — тримайте читабельний HTML у контролі версій і мініфікуйте лише результат збірки.
- Якщо сторінка поводиться дивно після мініфікації, перевірте наявність JavaScript, що покладається на точні пробіли всередині текстових вузлів (рідкісно, але трапляється з деякими старими віджетами).
- Форматування мініфікованого HTML з живого сайту — швидкий спосіб дослідити його структуру перед написанням скрапера чи налагодженням проблем із версткою.
- Поєднуйте з мініфікаторами CSS і JS нижче, якщо ваш процес збірки тримає стилі та скрипти в окремих файлах.
Де це стає в пригоді в реальних робочих процесах
Статичні сайти, поштові шаблони та лендинги, зроблені вручну, часто виходять у продакшн з тими самими відступами й коментарями, що використовувалися під час розробки. Мініфікація перед розгортанням зменшує реальну, хоч і помірну, кількість переданих даних — а для HTML листів кількість символів іноді впливає на поріг обрізання Gmail, тож менша розмітка має функціональну користь понад просто швидкість.
Напрямок форматування так само корисний у зворотному напрямку: вставлення мініфікованої сторінки з view-source і переформатування часто є найшвидшим способом зрозуміти структуру лендингу конкурента чи налагодити сторонній вбудований елемент.
Типові випадки використання
- Зменшення ваги статичного лендингу чи поштового шаблону перед публікацією.
- Переформатування мініфікованого фрагмента HTML, витягнутого з view-source, для розуміння його структури.
- Впорядкування HTML, вставленого з WYSIWYG-редактора чи експорту з CMS, який часто містить зайві пробіли.
- Швидка перевірка, чи є рукописний фрагмент HTML коректно сформованим, оскільки помилка розбору проявляється як чітка помилка.
Часті запитання
Чи завантажується мій HTML кудись?
Ні. Мініфікація та форматування обидва відбуваються локально у вашому браузері за допомогою JavaScript. Ніщо з вставленого не надсилається на сервер, тож це безпечно використовувати з внутрішніми шаблонами чи ще не опублікованими сторінками.
Чи не зламає мініфікація мою сторінку?
Не повинна — інструмент використовує справжній HTML-парсер (html-minifier-terser), який розуміє структуру тегів, тож зберігає чутливі до пробілів елементи на кшталт <pre> і <textarea> та не об'єднує атрибути некоректно. Завжди перевіряйте вибірково критичні сторінки після мініфікації, особливо якщо покладаєтеся на незвичайні вбудовані скрипти.
Чи мініфікує він також CSS і JavaScript усередині HTML?
Так. Вбудовані блоки <style> і <script> мініфікуються на місці за допомогою тих самих рушіїв, що й спеціалізовані інструменти мініфікації CSS і JS, тож вам не потрібно виймати їх вручну.
Наскільки зазвичай зменшується HTML?
Це залежить від того, скільки пробілів, коментарів і форматування було в оригіналі — рукописний HTML з великою кількістю відступів і коментарів зазвичай зменшується на 20-40%. HTML, згенерований фреймворком, який уже компактний, заощадить менше.
Чи можу я конвертувати мініфікований HTML назад у читабельний формат?
Так — вставте мініфікований HTML і натисніть "Форматувати" замість "Мініфікувати", щоб отримати назад належним чином відформатовану, читабельну розмітку.