Gerador de configuração do plugin de compressão do Vite
Gere a configuração do vite-plugin-compression para pré-comprimir os recursos de build do Vite em GZIP e Brotli - produz um vite.config.ts pronto para colar com importações específicas do framework, o comando de instalação e a configuração de servidor nginx. Suporta React, Vue, Svelte, SolidJS e Vanilla JS. Sem cadastro.
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.
Por que usar nosso gerador de configuração do plugin de compressão do Vite?
- Configuração de compressão do Vite instantânea: selecione seu framework, algoritmo e níveis de compressão - o gerador produz na hora um vite.config.ts pronto para colar com o vite-plugin-compression configurado corretamente.
- Gerador de configuração do Vite online seguro: toda a geração de configuração roda inteiramente no seu navegador. Não são necessários arquivos de projeto nem chaves de API: totalmente privado e utilizável offline.
- 3 formatos de saída: comando de instalação, vite.config.ts com importações específicas do framework e trecho de nginx.conf para servir arquivos pré-comprimidos - os três são atualizados em tempo real.
- 100 % grátis para sempre: gere quantas configurações de compressão do Vite precisar, totalmente grátis. Sem conta, sem assinatura, sem limites e sem anúncios.
O que é o plugin de compressão do Vite?
O vite-plugin-compression é um plugin do Vite que pré-comprime os arquivos de saída do build (bundles JavaScript, CSS, HTML) para os formatos GZIP e/ou Brotli no momento do build. Em vez de comprimir os arquivos a cada requisição HTTP (compressão em tempo de execução), o servidor serve diretamente os arquivos .gz ou .br pré-comprimidos - eliminando o custo de CPU em tempo de execução e produzindo tempos de resposta mais rápidos. Nosso gerador grátis de configuração do plugin de compressão do Vite produz o vite.config.ts correto para seu framework e suas configurações.
Como funciona nosso gerador de configuração de compressão do Vite
- Selecione suas configurações: escolha seu framework (React, Vue, Svelte etc.), o algoritmo de compressão (GZIP, Brotli ou ambos), o limite, os níveis de compressão e o gerenciador de pacotes.
- Geração instantânea da configuração: o gerador produz na hora três saídas - comando de instalação, vite.config.ts com importações específicas do framework e trecho de nginx.conf - todas atualizadas em tempo real.
- Copie e aplique: alterne entre as três abas, copie a configuração relevante e adicione-a ao seu projeto Vite e à configuração do servidor.
Pré-compressão vs compressão em tempo de execução
- Compressão em tempo de execução (nginx gzip on): comprime os arquivos a cada requisição - adiciona custo de CPU, aumenta o tempo de resposta e exige recursos do servidor.
- Pré-compressão (vite-plugin-compression): comprime os arquivos uma vez no momento do build - custo de CPU zero em tempo de execução, resposta instantânea e compatibilidade com qualquer servidor de arquivos estáticos ou CDN.
- Boa prática: use as duas - pré-comprima com o vite-plugin-compression e ative gzip_static no nginx como alternativa para arquivos sem versão pré-comprimida.
- Compatibilidade com CDN: envie os arquivos .gz e .br para S3, CloudFront ou Cloudflare R2 e sirva-os com o cabeçalho Content-Encoding correto.
GZIP vs Brotli em builds do Vite
O Brotli alcança compressão 15-25 % melhor que o GZIP em bundles de JavaScript e CSS. É suportado por todos os navegadores modernos (Chrome, Firefox, Edge, Safari 17.4+). O GZIP é a alternativa universal - suportado por todos os navegadores e servidores. Para compatibilidade máxima, gere os dois formatos e deixe o servidor escolher o melhor para cada cliente. A compressão Brotli em qualidade 6 é um bom equilíbrio entre taxa de compressão e tempo de build.
Perguntas frequentes
O vite-plugin-compression é um plugin do Vite que pré-comprime os arquivos de saída do build (JS, CSS, HTML) para os formatos GZIP e/ou Brotli no momento do build. Isso elimina o custo de CPU da compressão em tempo de execução no servidor e produz arquivos menores para entrega via CDN. Nosso gerador de configuração online grátis produz o vite.config.ts correto - sem cadastro.
A compressão em tempo de execução (nginx gzip on) comprime os arquivos a cada requisição, adicionando custo de CPU. A pré-compressão (vite-plugin-compression + nginx gzip_static) comprime os arquivos uma vez no momento do build e serve diretamente os arquivos .gz ou .br pré-comprimidos: custo de CPU zero em tempo de execução e tempos de resposta mais rápidos.
Sim. O gerador de configuração de compressão do Vite é 100 % grátis, sem cadastro, sem assinatura e sem limites. Você pode gerar quantas configurações precisar.
Use GZIP e Brotli para máxima compatibilidade. O Brotli alcança compressão 15-25 % melhor que o GZIP e é suportado por todos os navegadores modernos. O GZIP é a alternativa para navegadores e ferramentas antigos. Seu servidor (nginx com gzip_static + brotli_static) servirá o melhor formato que cada cliente suportar.
O limite controla o tamanho mínimo de arquivo para comprimir. Arquivos menores que o limite não são comprimidos: comprimir arquivos muito pequenos pode até aumentar o tamanho por causa dos cabeçalhos de compressão. 10 KB é um bom padrão. Para compressão agressiva, use 1 KB.
Exclua os originais apenas se o servidor estiver configurado para servir exclusivamente arquivos .gz/.br e você tiver certeza de que todos os clientes suportam o formato comprimido. Na maioria das configurações, mantenha os originais: o servidor servirá a versão comprimida quando o cliente a suportar e recorrerá ao original caso contrário.
O vite-plugin-compression funciona com a saída de build do lado do cliente do Vite. Em builds SSR, o plugin comprime o bundle do cliente, mas não o do servidor. Configure o servidor SSR para tratar a compressão separadamente com middleware como o pacote npm compression.
Ative gzip_static on no bloco server do nginx para servir arquivos .gz automaticamente. Para Brotli, instale o módulo ngx_brotli e ative brotli_static on. A aba nginx.conf deste gerador produz exatamente o trecho de configuração que você precisa.