Generador de configuración del plugin de compresión de Webpack
Genera un fragmento de webpack.config.js listo para producción con precompresión GZIP y Brotli usando compression-webpack-plugin. Configura los niveles de compresión, el umbral, minRatio y los patrones de recursos; después copia la configuración, instala el plugin y obtén las directivas de servicio de Nginx correspondientes. Se ejecuta íntegramente en tu navegador y sin registro.
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
¿Por qué usar nuestro generador de configuración del plugin de compresión de Webpack?
Estas son las ventajas principales de la herramienta.
- Configuración de compresión de Webpack instantánea: configura el nivel de GZIP, la calidad de Brotli, el umbral, minRatio y los patrones de recursos, y el generador produce un fragmento completo de webpack.config.js al instante.
- Generador de configuración de Webpack online seguro: toda la generación de configuración se ejecuta íntegramente en tu navegador. No se envía a ningún sitio ningún detalle del proyecto, ruta de archivo ni dato de configuración: totalmente privado y funciona sin conexión.
- GZIP + Brotli + fragmento de servicio de Nginx: genera los plugins de compresión solo GZIP, solo Brotli o ambos en una misma configuración, además de las directivas correspondientes gzip_static y brotli_static de Nginx para servir los archivos precomprimidos.
- 100 % gratis para siempre: genera configuraciones de compresión de webpack para tantos proyectos como necesites, totalmente gratis. Sin cuenta, sin suscripción, sin límites y sin anuncios.
¿Qué es el plugin de compresión de Webpack?
El plugin de compresión de webpack (compression-webpack-plugin) es un plugin de webpack que precomprime la salida de tu compilación en el momento de compilar, creando archivos .gz y .br junto a los recursos originales. Cuando tu servidor web está configurado para servir esos archivos precomprimidos (mediante gzip_static on en Nginx), se elimina el coste de CPU por petición de la compresión al vuelo. Nuestro generador de configuración gratuito produce un fragmento completo y listo para producción de webpack.config.js, todo generado localmente en tu navegador y sin registro.
Cómo funciona nuestro generador de configuración del plugin de compresión de Webpack
Estos son los tres pasos.
- Configura tus opciones: selecciona los algoritmos GZIP, Brotli o ambos. Ajusta los niveles de compresión, el umbral, minRatio, el patrón de recursos y el formato de módulo con los controles interactivos.
- Genera al instante: haz clic en «Generar configuración» y el generador produce un fragmento completo de webpack.config.js con las instancias de plugin correctas, íntegramente en tu navegador.
- Copia y despliega: instala el plugin, añade el fragmento a tu configuración de webpack, ejecuta la compilación y configura tu servidor web para servir los archivos precomprimidos con el fragmento de Nginx incluido.
Qué incluye la configuración generada
Estos son los elementos que se generan.
- Instancias de CompressionPlugin: una para GZIP (algorithm: 'gzip') y/o otra para Brotli (algorithm: 'brotliCompress') con los niveles y opciones que hayas configurado.
- Umbral y minRatio: omite comprimir recursos demasiado pequeños o que no se comprimen lo suficiente como para justificar la sobrecarga.
- Patrón de recursos: una expresión regular que solo coincide con los tipos de archivo que merece la pena comprimir: JS, CSS, HTML, SVG, JSON y WOFF2 por defecto.
- Fragmento de servicio de Nginx: las directivas correspondientes gzip_static y brotli_static para servir los archivos precomprimidos desde tu servidor web.
Precompresión frente a compresión al vuelo
La compresión al vuelo (por ejemplo, Nginx gzip on) comprime cada respuesta en el momento de la petición, añadiendo carga de CPU y latencia. La precompresión con el plugin de compresión de webpack comprime los recursos una vez en el momento de la compilación, así que el servidor simplemente lee y sirve el archivo precomprimido con cero coste de CPU por petición. Para recursos estáticos con mucho tráfico, la precompresión siempre es preferible. El generador de configuración del plugin de compresión de Webpack facilita añadir precompresión a cualquier proyecto basado en webpack.
Preguntas frecuentes
Un generador de configuración del plugin de compresión de Webpack produce un fragmento de webpack.config.js listo para usar que añade precompresión GZIP y/o Brotli a tu compilación de webpack mediante el paquete compression-webpack-plugin. Configura niveles de compresión, umbral, minRatio y patrones de recursos, y el generador emite las instancias de plugin correctas al instante. Nuestro generador online gratuito funciona íntegramente en tu navegador y sin registro.
La compresión al vuelo (por ejemplo, Nginx gzip on) comprime cada respuesta HTTP en el momento de la petición, lo que añade carga de CPU y latencia. La precompresión con el plugin de compresión de webpack comprime los recursos una vez en el momento de la compilación, de modo que el servidor solo lee y sirve el archivo .gz o .br precomprimido sin coste de CPU por petición. Para recursos estáticos con mucho tráfico, la precompresión siempre es preferible.
Sí. El generador de configuración del plugin de compresión de Webpack funciona íntegramente en tu navegador: toda la generación de configuración se realiza localmente con JavaScript. No se envía a ningún servidor ningún detalle del proyecto, ruta de archivo ni dato de configuración. Tus ajustes nunca salen de tu dispositivo.
Sí. El generador de configuración del plugin de compresión de Webpack es 100 % gratis, sin registro, sin suscripción y sin límites. Genera configuraciones para tantos proyectos como necesites.
Sí: el plugin de compresión de webpack crea archivos .gz y .br en el momento de la compilación, pero tu servidor web debe estar configurado para servirlos. En Nginx, añade gzip_static on para GZIP y brotli_static on para Brotli (requiere el módulo ngx_brotli). En Apache, usa mod_deflate con servicio de archivos precomprimidos. El generador incluye el fragmento de Nginx en los resultados.
Para GZIP, se recomienda el nivel 9 en precompresión estática, ya que el coste de CPU se paga una vez en la compilación. Para Brotli, la calidad 11 logra la compresión máxima, normalmente entre un 20 y un 26 % mejor que GZIP nivel 9. En pipelines de CI/CD donde importa el tiempo de compilación, usa GZIP nivel 6 y Brotli calidad 6 para equilibrar ratio de compresión y velocidad de compilación.
La opción threshold (en bytes) indica al plugin que omita la compresión de recursos más pequeños que el tamaño indicado. El valor predeterminado de 10.240 bytes (10 KB) es un buen punto de partida: comprimir archivos muy pequeños añade sobrecarga sin ahorros significativos. Aumenta este valor si quieres omitir más archivos pequeños, o ponlo a 0 para comprimirlo todo.
La opción minRatio indica al plugin que omita la creación de un archivo comprimido si el ratio de compresión no es suficientemente bueno. Un minRatio de 0,8 significa: solo crear el archivo comprimido si ocupa como máximo el 80 % del tamaño original (es decir, al menos un 20 % de ahorro). Ponlo a 1 para crear siempre archivos comprimidos, independientemente del ahorro, o bájalo para exigir mejor compresión antes de crear el archivo.
Sí. En Create React App, usa react-app-rewired o CRACO para personalizar la configuración de webpack. En Angular CLI, usa @angular-builders/custom-webpack. En Vue CLI, añade el plugin en vue.config.js dentro de configureWebpack. El generador produce una configuración estándar de CompressionPlugin que funciona con cualquier herramienta de compilación basada en webpack.