rehype-minify: минификация HTML

rehype-minify — это плагин для экосистемы Rehype, предназначенный для минификации HTML-документов. Его основная задача — уменьшить размер HTML, удаляя лишние пробелы, комментарии, пустые атрибуты и оптимизируя структуру документа без изменения визуального представления страницы в браузере.

Плагин интегрируется с unified и Rehype, что позволяет использовать его как часть конвейера обработки HTML, включая парсинг, трансформацию и генерацию кода.

Установка и подключение

Установка осуществляется через npm:

npm install rehype rehype-minify

Подключение в коде JavaScript выглядит следующим образом:

import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeStringify from 'rehype-stringify';
import rehypeMinify from 'rehype-minify';

const html = `
  
    Пример
  
  
    
Заголовок

  
`;

const result = await unified()
  .use(rehypeParse, { fragment: false })  // парсинг полного HTML-документа
  .use(rehypeMinify)                     // минификация
  .use(rehypeStringify)                  // генерация строки HTML
  .process(html);

console.log(String(result));

После выполнения этого кода HTML будет сжат, все лишние пробелы и переносы строк удалятся, что уменьшит общий вес документа.

Основные возможности rehype-minify

  1. Удаление пустых атрибутов Все атрибуты, не содержащие значений, автоматически удаляются:

    будет преобразовано в:

  2. Удаление комментариев Комментарии убираются, что снижает объем HTML.

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

  4. Минификация тегов Теги без содержимого или с пустыми блоками могут быть сокращены:

    может быть оставлено пустым или удалено в зависимости от настроек.

  5. Оптимизация атрибутов Значения атрибутов могут быть упрощены, например, type="text/javascript" сокращается, если браузеры допускают дефолтное поведение.

Настройка плагина

rehype-minify позволяет тонко настраивать минификацию через объект опций:

.use(rehypeMinify, {
  collapseWhitespace: true,   // удаляет лишние пробелы
  removeComments: true,       // удаляет комментарии
  minifyCss: true,            // минифицирует встроенный CSS
  minifyJs: true              // минифицирует встроенный JS
})
  • collapseWhitespace — объединяет последовательные пробелы в один.
  • removeComments — удаляет HTML-комментарии.
  • minifyCss — применяет минификацию CSS внутри тегов