Перейти к содержимому
Aback Tools Logo

Генератор конфигурации плагина сжатия Vite

Сгенерируйте конфигурацию vite-plugin-compression для предварительного сжатия ресурсов сборки Vite в GZIP и Brotli — создаётся готовый к вставке vite.config.ts с импортами под нужный фреймворк, командой установки и конфигурацией отдачи через nginx. Поддерживаются React, Vue, Svelte, SolidJS и Vanilla JS. Без регистрации.

Vite Compression Plugin Config Generator

Generate vite-plugin-compression configuration for pre-compressing Vite build assets to GZIP and Brotli - produces ready-to-paste vite.config.ts, install command, and nginx serving configuration. Supports React, Vue, Svelte, SolidJS, and Vanilla JS.

Your Vite Project Configuration

Files smaller than this are not compressed

Tips

Serving both GZIP and Brotli lets your server choose the best format per client. Brotli is served to modern browsers; GZIP is the fallback for older clients.

vite-plugin-compression only runs during production builds (vite build). Development mode (vite dev) is not affected.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteCompression from 'vite-plugin-compression'
import zlib from 'node:zlib'

export default defineConfig({
  plugins: [
    react(),
    // GZIP compression - produces .gz files alongside originals
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240,
      compressionOptions: { level: 6 },
      deleteOriginFile: false,
    }),
    // Brotli compression - produces .br files alongside originals
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 10240,
      compressionOptions: { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 6 } },
      deleteOriginFile: false,
    }),
  ],
  build: {
    // Recommended: enable source maps for production debugging
    // sourcemap: true,

    // Rollup options for chunk splitting (improves compression)
    rollupOptions: {
      output: {
        // Split vendor chunks for better long-term caching
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

vite-plugin-compression pre-compresses assets at build time - your server serves the .gz or .br files directly without runtime CPU overhead. Requires server-side support for gzip_static (nginx) or equivalent CDN configuration.

Почему стоит использовать наш генератор конфигурации плагина сжатия Vite?

  • Мгновенная конфигурация сжатия Vite: выберите фреймворк, алгоритм и уровни сжатия — генератор сразу создаёт готовый к вставке vite.config.ts с корректно настроенным vite-plugin-compression.
  • Безопасный онлайн-генератор конфигурации Vite: вся генерация конфигурации выполняется полностью в браузере. Файлы проекта и API-ключи не требуются — полностью приватно и работает офлайн.
  • 3 формата вывода: команда установки, vite.config.ts с импортами под фреймворк и фрагмент nginx.conf для отдачи предварительно сжатых файлов — все три обновляются в реальном времени.
  • 100 % бесплатно навсегда: генерируйте сколько нужно конфигураций сжатия Vite совершенно бесплатно. Без аккаунта, без подписки, без ограничений и без рекламы.

Что такое плагин сжатия Vite?

vite-plugin-compression — это плагин Vite, который во время сборки предварительно сжимает выходные файлы (бандлы JavaScript, CSS, HTML) в форматы GZIP и/или Brotli. Вместо сжатия файлов при каждом HTTP-запросе (сжатие во время работы) сервер отдаёт готовые файлы .gz или .br напрямую — это устраняет затраты CPU во время работы и ускоряет ответы. Наш бесплатный генератор конфигурации плагина сжатия Vite создаёт правильный vite.config.ts для вашего фреймворка и настроек.

Как работает наш генератор конфигурации сжатия Vite

  1. Выберите параметры: укажите фреймворк (React, Vue, Svelte и др.), алгоритм сжатия (GZIP, Brotli или оба), порог, уровни сжатия и менеджер пакетов.
  2. Мгновенная генерация конфигурации: генератор сразу создаёт три вывода — команду установки, vite.config.ts с импортами под фреймворк и фрагмент nginx.conf, — обновляя их в реальном времени.
  3. Скопируйте и примените: переключайтесь между тремя вкладками, копируйте нужную конфигурацию и добавляйте её в проект Vite и конфигурацию сервера.

Предварительное сжатие против сжатия во время работы

  • Сжатие во время работы (nginx gzip on): сжимает файлы при каждом запросе — добавляет затраты CPU, увеличивает время ответа и требует ресурсов сервера.
  • Предварительное сжатие (vite-plugin-compression): сжимает файлы один раз при сборке — нулевые затраты CPU во время работы, мгновенный ответ и совместимость с любым сервером статики или CDN.
  • Лучшая практика: используйте оба подхода — предварительно сжимайте через vite-plugin-compression и включите gzip_static в nginx как резерв для файлов без предварительно сжатой версии.
  • Совместимость с CDN: загружайте файлы .gz и .br в S3, CloudFront или Cloudflare R2 и отдавайте их с корректным заголовком Content-Encoding.

GZIP против Brotli для сборок Vite

Brotli даёт сжатие на 15–25 % лучше GZIP для бандлов JavaScript и CSS. Он поддерживается всеми современными браузерами (Chrome, Firefox, Edge, Safari 17.4+). GZIP — универсальный резерв, поддерживаемый всеми браузерами и серверами. Для максимальной совместимости генерируйте оба формата и позвольте серверу выбирать лучший для каждого клиента. Сжатие Brotli с качеством 6 — хороший баланс между степенью сжатия и временем сборки.

Часто задаваемые вопросы

vite-plugin-compression — это плагин Vite, который во время сборки предварительно сжимает выходные файлы (JS, CSS, HTML) в формат GZIP и/или Brotli. Это устраняет затраты CPU на сжатие во время работы сервера и даёт меньшие файлы для доставки через CDN. Наш бесплатный онлайн-генератор конфигурации создаёт корректный vite.config.ts — без регистрации.

Сжатие во время работы (nginx gzip on) сжимает файлы при каждом запросе, добавляя затраты CPU. Предварительное сжатие (vite-plugin-compression + nginx gzip_static) сжимает файлы один раз при сборке и отдаёт готовые файлы .gz или .br напрямую — нулевые затраты CPU во время работы и более быстрые ответы.

Да. Генератор конфигурации сжатия Vite на 100 % бесплатен: без регистрации, без подписки и без ограничений. Можно сгенерировать столько конфигураций, сколько нужно.

Используйте и GZIP, и Brotli для максимальной совместимости. Brotli даёт сжатие на 15–25 % лучше GZIP и поддерживается всеми современными браузерами. GZIP — универсальный резерв для старых браузеров и инструментов. Ваш сервер (nginx с gzip_static + brotli_static) отдаст лучший формат, который поддерживает клиент.

Порог определяет минимальный размер файла для сжатия. Файлы меньше порога не сжимаются: сжатие очень маленьких файлов может даже увеличить их размер из-за заголовков сжатия. Хорошее значение по умолчанию — 10 КБ. Для агрессивного сжатия используйте 1 КБ.

Удаляйте оригиналы только если сервер настроен отдавать исключительно файлы .gz/.br и вы уверены, что все клиенты поддерживают сжатый формат. В большинстве конфигураций сохраняйте оригиналы: сервер отдаст сжатую версию, когда клиент её поддерживает, и вернётся к оригиналу в противном случае.

vite-plugin-compression работает с клиентским выводом сборки Vite. При SSR-сборках плагин сжимает клиентский бандл, но не серверный. Настройте SSR-сервер на отдельную обработку сжатия с помощью middleware вроде npm-пакета compression.

Включите gzip_static on в блоке server nginx, чтобы файлы .gz отдавались автоматически. Для Brotli установите модуль ngx_brotli и включите brotli_static on. Вкладка nginx.conf в этом генераторе создаёт именно нужный фрагмент конфигурации.