Generador de configuración del plugin de compresión de Vite

Genera la configuración de vite-plugin-compression para precomprimir los recursos de compilación de Vite en GZIP y Brotli: produce un vite.config.ts listo para pegar con importaciones específicas del framework, el comando de instalación y la configuración de servido en nginx. Admite React, Vue, Svelte, SolidJS y Vanilla JS. Sin registro.

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

Framework

Package Manager

Compression Algorithm

Compression Threshold

Files smaller than this are not compressed

GZIP Level

Brotli Quality

Original Files

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.

¿Por qué usar nuestro generador de configuración del plugin de compresión de Vite?

Configuración de compresión de Vite instantánea: selecciona tu framework, algoritmo y niveles de compresión - el generador produce al instante un vite.config.ts listo para pegar con vite-plugin-compression configurado correctamente.
Generador de configuración de Vite online seguro: toda la generación de configuración se ejecuta enteramente en tu navegador. No se requieren archivos de proyecto ni claves de API: totalmente privada y apta para uso sin conexión.
3 formatos de salida: comando de instalación, vite.config.ts con importaciones específicas del framework y fragmento de nginx.conf para servir archivos precomprimidos - los tres se actualizan en tiempo real.
100 % grátis para siempre: genera tantas configuraciones de compresión de Vite como necesites, totalmente grátis. Sin cuenta, sin suscripción, sin límites y sin anuncios.

¿Qué es el plugin de compresión de Vite?

vite-plugin-compression es un plugin de Vite que precomprime los archivos de salida de la compilación (paquetes JavaScript, CSS, HTML) a formato GZIP y/o Brotli en el momento de compilar. En lugar de comprimir los archivos en cada petición HTTP (compresión en tiempo de ejecución), el servidor sirve directamente los archivos .gz o .br precomprimidos, eliminando el coste de CPU en tiempo de ejecución y produciendo tiempos de respuesta más rápidos. Nuestro generador grátis de configuración del plugin de compresión de Vite produce el vite.config.ts correcto para tu framework y tus ajustes.

Cómo funciona nuestro generador de configuración de compresión de Vite

Selecciona tus ajustes: elige tu framework (React, Vue, Svelte, etc.), el algoritmo de compresión (GZIP, Brotli o ambos), el umbral, los niveles de compresión y el gestor de paquetes.
Generación instantánea de la configuración: el generador produce al instante tres salidas - comando de instalación, vite.config.ts con importaciones específicas del framework y fragmento de nginx.conf - todas actualizadas en tiempo real.
Copia y aplica: cambia entre las tres pestañas, copia la configuración correspondiente y añádela a tu proyecto Vite y a la configuración de tu servidor.

Precompresión vs compresión en tiempo de ejecución

Compresión en tiempo de ejecución (nginx gzip on): comprime los archivos en cada petición - añade coste de CPU, aumenta el tiempo de respuesta y requiere recursos del servidor.
Precompresión (vite-plugin-compression): comprime los archivos una vez en el momento de compilar - cero coste de CPU en tiempo de ejecución, respuesta instantánea y compatibilidad con cualquier servidor de archivos estáticos o CDN.
Buena práctica: usa ambas - precomprime con vite-plugin-compression y activa gzip_static en nginx como alternativa para los archivos sin versión precomprimida.
Compatibilidad con CDN: sube los archivos .gz y .br a S3, CloudFront o Cloudflare R2 y sírvelos con la cabecera Content-Encoding correcta.

GZIP vs Brotli en compilaciones de Vite

Brotli logra una compresión un 15-25 % mejor que GZIP en paquetes de JavaScript y CSS. Es compatible con todos los navegadores modernos (Chrome, Firefox, Edge, Safari 17.4+). GZIP es la alternativa universal: compatible con todos los navegadores y servidores. Para máxima compatibilidad, genera ambos formatos y deja que tu servidor elija el mejor para cada cliente. La compresión Brotli con calidad 6 es un buen equilibrio entre tasa de compresión y tiempo de compilación.

Preguntas frecuentes

vite-plugin-compression es un plugin de Vite que precomprime los archivos de salida de la compilación (JS, CSS, HTML) a formato GZIP y/o Brotli en el momento de compilar. Esto elimina el coste de CPU de la compresión en tiempo de ejecución en tu servidor y produce archivos más pequeños para la entrega vía CDN. Nuestro generador de configuración online grátis produce el vite.config.ts correcto - sin registro.

La compresión en tiempo de ejecución (nginx gzip on) comprime los archivos en cada petición, añadiendo coste de CPU. La precompresión (vite-plugin-compression + nginx gzip_static) comprime los archivos una sola vez en el momento de compilar y sirve directamente los archivos .gz o .br precomprimidos: cero coste de CPU en tiempo de ejecución y tiempos de respuesta más rápidos.

Sí. El generador de configuración de compresión de Vite es 100 % grátis, sin registro, sin suscripción y sin límites. Puedes generar tantas configuraciones como necesites.

Usa GZIP y Brotli para máxima compatibilidad. Brotli logra una compresión un 15-25 % mejor que GZIP y es compatible con todos los navegadores modernos. GZIP es la alternativa para navegadores y herramientas antiguos. Tu servidor (nginx con gzip_static + brotli_static) servirá el mejor formato que admita cada cliente.

El umbral controla el tamaño mínimo de archivo para comprimirlo. Los archivos más pequeños que el umbral no se comprimen: comprimir archivos muy pequeños puede aumentar su tamaño por las cabeceras de compresión. 10 KB es un buen valor predeterminado. Para una compresión agresiva, usa 1 KB.

Borra los originales solo si tu servidor está configurado para servir exclusivamente archivos .gz/.br y tienes la certeza de que todos los clientes admiten el formato comprimido. En la mayoría de configuraciones, conserva los originales: tu servidor servirá la versión comprimida cuando el cliente la admita y recurrirá al original en caso contrario.

vite-plugin-compression funciona con la salida de compilación del lado del cliente de Vite. En compilaciones SSR, el plugin comprime el paquete del cliente pero no el del servidor. Configura tu servidor SSR para gestionar la compresión por separado con middleware como el paquete npm compression.

Activa gzip_static on en tu bloque server de nginx para servir archivos .gz automáticamente. Para Brotli, instala el módulo ngx_brotli y activa brotli_static on. La pestaña nginx.conf de este generador produce exactamente el fragmento de configuración que necesitas.