Генератор конфигурации плагина сжатия Webpack
Создайте готовый к продакшену фрагмент webpack.config.js с предварительным сжатием GZIP и Brotli через compression-webpack-plugin. Настройте уровни сжатия, threshold, minRatio и шаблоны ресурсов, затем скопируйте конфигурацию, установите плагин и получите соответствующие директивы отдачи для Nginx. Работает полностью в браузере, без регистрации.
Configure GZIP and Brotli pre-compression for your webpack build and generate a production-ready webpack.config.jssnippet using compression-webpack-plugin. All generation runs locally in your browser.
Best compression - slowest build
Maximum - slowest build
Skip assets smaller than this size
Skip if compressed/original > this ratio (0.8 = skip if <20% savings)
Regex to match assets to compress
Почему стоит использовать наш генератор конфигурации плагина сжатия Webpack?
Вот основные преимущества инструмента.
- Мгновенная конфигурация сжатия Webpack: настройте уровень GZIP, качество Brotli, threshold, minRatio и шаблоны ресурсов, и генератор мгновенно создаст полный фрагмент webpack.config.js.
- Безопасный онлайн-генератор конфигурации Webpack: вся генерация конфигурации выполняется полностью в браузере. Никакие данные проекта, пути к файлам или параметры конфигурации никуда не отправляются — полностью приватно и работает офлайн.
- GZIP + Brotli + фрагмент отдачи Nginx: создайте плагины сжатия только GZIP, только Brotli или оба в одной конфигурации, а также соответствующие директивы Nginx gzip_static и brotli_static для отдачи предварительно сжатых файлов.
- 100 % бесплатно навсегда: создавайте конфигурации сжатия webpack для любого количества проектов совершенно бесплатно. Без аккаунта, без подписки, без ограничений и без рекламы.
Что такое плагин сжатия Webpack?
Плагин сжатия Webpack (compression-webpack-plugin) — это плагин webpack, который предварительно сжимает результат сборки во время сборки, создавая файлы .gz и .br рядом с исходными ресурсами. Когда веб-сервер настроен на отдачу этих предварительно сжатых файлов (через gzip_static on в Nginx), исчезают затраты CPU на сжатие на лету при каждом запросе. Наш бесплатный генератор конфигурации плагина сжатия Webpack создаёт полный, готовый к продакшену фрагмент webpack.config.js — всё генерируется локально в браузере, без регистрации.
Как работает наш генератор конфигурации плагина сжатия Webpack
Вот три шага.
- Настройте параметры: выберите алгоритмы GZIP, Brotli или оба. Установите уровни сжатия, threshold, minRatio, шаблон ресурсов и формат модулей с помощью интерактивных элементов управления.
- Создайте мгновенно: нажмите «Создать конфигурацию», и генератор сформирует полный фрагмент webpack.config.js с правильными экземплярами плагинов — полностью в браузере.
- Скопируйте и разверните: установите плагин, добавьте фрагмент в конфигурацию webpack, выполните сборку и настройте веб-сервер на отдачу предварительно сжатых файлов с помощью прилагаемого фрагмента Nginx.
Что включает созданная конфигурация
Вот какие элементы генерируются.
- Экземпляры CompressionPlugin: один для GZIP (algorithm: 'gzip') и/или один для Brotli (algorithm: 'brotliCompress') с настроенными уровнями и параметрами.
- Threshold и minRatio: пропускайте сжатие ресурсов, которые слишком малы или сжимаются недостаточно, чтобы оправдать накладные расходы.
- Шаблон ресурсов: регулярное выражение, которое соответствует только тем типам файлов, которые стоит сжимать, — по умолчанию JS, CSS, HTML, SVG, JSON и WOFF2.
- Фрагмент отдачи Nginx: соответствующие директивы gzip_static и brotli_static для отдачи предварительно сжатых файлов с вашего веб-сервера.
Предварительное сжатие против сжатия на лету
Сжатие на лету (например, Nginx gzip on) сжимает каждый ответ в момент запроса, добавляя нагрузку на CPU и задержку. При предварительном сжатии с плагином сжатия Webpack ресурсы сжимаются один раз во время сборки, поэтому сервер просто читает и отдаёт предварительно сжатый файл с нулевыми затратами CPU на запрос. Для статических ресурсов с высоким трафиком предварительное сжатие всегда предпочтительнее. Генератор конфигурации плагина сжатия Webpack позволяет легко добавить предварительное сжатие в любой проект на основе webpack.
Часто задаваемые вопросы
Генератор конфигурации плагина сжатия Webpack создаёт готовый к использованию фрагмент webpack.config.js, который добавляет предварительное сжатие GZIP и/или Brotli в вашу сборку webpack через пакет compression-webpack-plugin. Настройте уровни сжатия, threshold, minRatio и шаблоны ресурсов, и генератор мгновенно выдаст правильные экземпляры плагинов. Наш бесплатный онлайн-генератор работает полностью в браузере, без регистрации.
Сжатие на лету (например, Nginx gzip on) сжимает каждый HTTP-ответ в момент запроса, добавляя нагрузку на CPU и задержку. Предварительное сжатие с плагином сжатия Webpack сжимает ресурсы один раз во время сборки, поэтому сервер просто читает и отдаёт предварительно сжатый файл .gz или .br без затрат CPU на запрос. Для статических ресурсов с высоким трафиком предварительное сжатие всегда предпочтительнее.
Да. Генератор конфигурации плагина сжатия Webpack работает полностью в браузере: вся генерация конфигурации выполняется локально на JavaScript. Никакие данные проекта, пути к файлам или параметры конфигурации не отправляются на серверы. Ваши настройки никогда не покидают устройство.
Да. Генератор конфигурации плагина сжатия Webpack на 100 % бесплатен: без регистрации, без подписки и без ограничений. Создавайте конфигурации для любого количества проектов.
Да — плагин сжатия Webpack создаёт файлы .gz и .br во время сборки, но ваш веб-сервер должен быть настроен на их отдачу. Для Nginx добавьте gzip_static on для GZIP и brotli_static on для Brotli (требуется модуль ngx_brotli). Для Apache используйте mod_deflate с отдачей предварительно сжатых файлов. Генератор включает фрагмент Nginx в результаты.
Для GZIP при статическом предварительном сжатии рекомендуется уровень 9, так как затраты CPU платятся один раз при сборке. Для Brotli качество 11 даёт максимальное сжатие — обычно на 20–26 % лучше, чем GZIP уровня 9. В конвейерах CI/CD, где важна скорость сборки, используйте GZIP уровня 6 и Brotli качества 6, чтобы сбалансировать степень сжатия и скорость сборки.
Опция threshold (в байтах) указывает плагину пропускать сжатие ресурсов меньше указанного размера. Значение по умолчанию 10 240 байт (10 КБ) — хорошая отправная точка: сжатие очень маленьких файлов добавляет накладные расходы без заметной экономии. Увеличьте это значение, чтобы пропускать больше мелких файлов, или установите 0, чтобы сжимать всё.
Опция minRatio указывает плагину не создавать сжатый файл, если степень сжатия недостаточно хороша. minRatio 0,8 означает: создавать сжатый файл только если он занимает не более 80 % исходного размера (то есть экономия не менее 20 %). Установите 1, чтобы всегда создавать сжатые файлы, или уменьшите значение, чтобы требовать лучшего сжатия.
Да. Для Create React App используйте react-app-rewired или CRACO для настройки конфигурации webpack. Для Angular CLI используйте @angular-builders/custom-webpack. Для Vue CLI добавьте плагин в vue.config.js в разделе configureWebpack. Генератор создаёт стандартную конфигурацию CompressionPlugin, которая работает с любым инструментом сборки на основе webpack.