CompressionPlugin: gzip и brotli сжатие

CompressionPlugin используется для создания предварительно сжатых версий ассетов на этапе сборки Webpack. Основная задача плагина заключается в генерации файлов сжатых алгоритмами gzip и brotli, которые затем могут быть использованы сервером для ускоренной доставки контента. Такой подход уменьшает объем передаваемых данных без необходимости сжатия на лету, снижая нагрузку на CPU сервера и ускоряя загрузку страниц.

Сжатие ассетов происходит после того, как Webpack сформировал итоговые бандлы. CompressionPlugin анализирует выходные файлы и создает их копии с применением выбранного алгоритма. Результатом становятся дополнительные файлы рядом с исходными:

  • bundle.js → bundle.js.gz
  • bundle.js → bundle.js.br

Дальнейшая ответственность за выбор нужной версии файла ложится на веб-сервер, который ориентируется на заголовки Accept-Encoding от клиента.

Алгоритм gzip

Gzip основан на комбинации алгоритмов DEFLATE, использующих LZ77 и кодирование Хаффмана. Он поддерживается всеми браузерами и является стандартом де-факто для HTTP-сжатия.

При использовании gzip достигается:

  • умеренная степень сжатия
  • высокая скорость декомпрессии
  • широкая совместимость

В контексте CompressionPlugin gzip применяется как базовый уровень оптимизации, обеспечивающий совместимость даже со старыми клиентами.

Настройка gzip в CompressionPlugin

Конфигурация Webpack включает подключение плагина и указание алгоритма через модуль zlib:

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "gzip",
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
};

Параметр algorithm: "gzip" активирует использование стандартного gzip-сжатия. Значение threshold определяет минимальный размер файла, начиная с которого применяется сжатие. Параметр minRatio задает минимальную степень выигрыша по размеру, при которой создается сжатая версия.

Алгоритм Brotli

Brotli разработан Google и обеспечивает более высокую степень сжатия по сравнению с gzip при сопоставимой или лучшей скорости декомпрессии на стороне клиента. Он особенно эффективен для текстовых ресурсов: JavaScript, CSS, HTML и JSON.

Особенности Brotli:

  • более высокая плотность сжатия
  • лучшее уменьшение размера по сравнению с gzip (до 20–30% дополнительно)
  • оптимизация под статический контент
  • поддержка современных браузеров

Brotli использует словарь предсказаний и контекстно-зависимое кодирование, что делает его эффективным для повторяющихся структур в веб-ресурсах.

Настройка Brotli в CompressionPlugin

Для использования Brotli необходимо указать алгоритм brotliCompress, предоставляемый Node.js через модуль zlib:

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "brotliCompress",
      test: /\.(js|css|html|svg)$/,
      compressionOptions: {
        level: 11
      },
      threshold: 10240,
      minRatio: 0.8,
      filename: "[path][base].br"
    })
  ]
};

Параметр compressionOptions.level управляет степенью сжатия. Значение 11 соответствует максимальному уровню, обеспечивающему наименьший размер файла при увеличении времени сборки.

Совместное использование gzip и Brotli

В реальных проектах часто применяется двойная стратегия сжатия. Генерируются оба варианта файлов:

  • .br для современных браузеров
  • .gz как fallback для старых клиентов

Webpack позволяет подключить несколько экземпляров CompressionPlugin:

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "brotliCompress",
      test: /\.(js|css|html)$/,
      compressionOptions: { level: 11 },
      filename: "[path][base].br"
    }),
    new CompressionPlugin({
      algorithm: "gzip",
      test: /\.(js|css|html)$/,
      threshold: 10240,
      minRatio: 0.8,
      filename: "[path][base].gz"
    })
  ]
};

Такой подход обеспечивает максимальную совместимость и оптимальную производительность загрузки ресурсов.

Настройка фильтрации файлов

Параметр test управляет набором файлов, подлежащих сжатию. Чаще всего включаются:

  • JavaScript-бандлы
  • CSS-файлы
  • HTML-шаблоны
  • JSON-данные

Исключение бинарных форматов критично, так как их сжатие часто не дает эффекта или даже увеличивает размер.

Пример более точной фильтрации:

test: /\.(js|css|html|json|svg)$/

Для исключения уже сжатых файлов используется exclude:

exclude: /\.(gz|br)$/

Управление порогом сжатия

Параметр threshold определяет минимальный размер файла для обработки. Маленькие файлы часто не выигрывают от дополнительного сжатия, так как накладные расходы могут нивелировать эффект.

Практические значения:

  • 0–5 KB: нецелесообразно сжимать
  • 10 KB: стандартный порог
  • 20 KB и выше: для крупных проектов с акцентом на производительность

Коэффициент минимального выигрыша

Параметр minRatio контролирует экономическую эффективность сжатия. Если итоговый размер недостаточно меньше исходного, файл не создается.

Формула оценки:

  • ratio = compressedSize / originalSize
  • если ratio > minRatio, файл сохраняется

Типичное значение 0.8 означает, что файл будет создан только при снижении размера минимум на 20%.

Имя выходных файлов

Параметр filename позволяет управлять структурой выходных данных. Это важно для интеграции с CDN и серверной логикой:

filename: "[path][base].gz"

или

filename: "[file].br"

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

Производственные сценарии использования

В продакшн-средах сжатые файлы обычно отдаются сервером через конфигурацию:

  • Nginx с модулем gzip_static и brotli_static
  • Apache с mod_deflate и mod_brotli
  • Node.js middleware с проверкой Accept-Encoding

Сервер выбирает наиболее подходящую версию ресурса:

  1. Проверка поддержки Brotli
  2. При отсутствии поддержки — gzip
  3. При отсутствии обоих — оригинальный файл

Влияние на сборку Webpack

Использование CompressionPlugin увеличивает время сборки, особенно при Brotli с высоким уровнем сжатия. Это связано с вычислительной сложностью алгоритма.

Основные факторы нагрузки:

  • размер бандлов
  • уровень compressionOptions.level
  • количество файлов
  • параллелизм сборки

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

Оптимизация производительности сборки

Для ускорения процесса генерации сжатых файлов применяются следующие подходы:

  • ограничение test только критичными ассетами
  • исключение source maps
  • использование параллельной сборки Webpack
  • снижение уровня Brotli при разработке

Пример разделения конфигураций:

const isProd = process.env.NODE_ENV === "production";

new CompressionPlugin({
  algorithm: "brotliCompress",
  compressionOptions: {
    level: isProd ? 11 : 4
  }
});

Взаимодействие с CDN и кешированием

Сжатые файлы эффективно работают в связке с CDN. При этом важно учитывать:

  • корректные заголовки Content-Encoding: br или gzip
  • кеширование по имени файла (content hashing)
  • предварительная генерация уменьшает нагрузку на edge-узлы

Комбинация Webpack CompressionPlugin и CDN позволяет достигать минимального времени загрузки даже при больших JavaScript-бандлах.

Практическая роль в оптимизации фронтенда

Использование gzip и Brotli через CompressionPlugin напрямую влияет на:

  • скорость первой отрисовки
  • время загрузки JS-логики
  • показатель Lighthouse Performance
  • сетевую нагрузку на мобильных устройствах

На практике Brotli чаще используется для статических ресурсов, тогда как gzip остается универсальным резервным механизмом для совместимости.

Оглавление