Gerador de configuração do plugin de compressão Webpack
Gere um excerto de webpack.config.js pronto para produção com pré-compressão GZIP e Brotli através do compression-webpack-plugin. Configure os níveis de compressão, o limite, o minRatio e os padrões de recursos — depois copie a configuração, instale o plugin e obtenha as diretivas de serviço do Nginx correspondentes. Funciona inteiramente no seu navegador e sem registo.
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
Porque usar o nosso gerador de configuração do plugin de compressão Webpack?
Estas são as principais vantagens da ferramenta.
- Configuração de compressão Webpack instantânea: configure o nível GZIP, a qualidade Brotli, o limite, o minRatio e os padrões de recursos, e o gerador produz instantaneamente um excerto completo de webpack.config.js.
- Gerador de configuração Webpack online seguro: toda a geração de configuração é executada inteiramente no seu navegador. Nenhum detalhe do projeto, caminho de ficheiro ou dado de configuração é enviado para lado algum: totalmente privado e funciona offline.
- GZIP + Brotli + excerto de serviço do Nginx: gere os plugins de compressão apenas GZIP, apenas Brotli ou ambos numa mesma configuração — além das diretivas correspondentes gzip_static e brotli_static do Nginx para servir os ficheiros pré-comprimidos.
- 100 % grátis para sempre: gere configurações de compressão webpack para tantos projetos quantos precisar, totalmente grátis. Sem conta, sem subscrição, sem limites e sem anúncios.
O que é o plugin de compressão Webpack?
O plugin de compressão Webpack (compression-webpack-plugin) é um plugin do webpack que pré-comprime a saída da sua compilação no momento da construção, criando ficheiros .gz e .br ao lado dos recursos originais. Quando o seu servidor web está configurado para servir esses ficheiros pré-comprimidos (através de gzip_static on no Nginx), elimina o custo de CPU por pedido da compressão em tempo real. O nosso gerador de configuração grátis produz um excerto completo e pronto para produção de webpack.config.js, tudo gerado localmente no seu navegador e sem registo.
Como funciona o nosso gerador de configuração do plugin de compressão Webpack
Estes são os três passos.
- Configure as suas opções: selecione os algoritmos GZIP, Brotli ou ambos. Ajuste os níveis de compressão, o limite, o minRatio, o padrão de recursos e o formato de módulo com os controlos interativos.
- Gere instantaneamente: clique em «Gerar configuração» e o gerador produz um excerto completo de webpack.config.js com as instâncias de plugin corretas, inteiramente no seu navegador.
- Copie e implemente: instale o plugin, adicione o excerto à sua configuração webpack, execute a compilação e configure o seu servidor web para servir os ficheiros pré-comprimidos com o excerto de Nginx incluído.
O que inclui a configuração gerada
Eis os elementos gerados.
- Instâncias CompressionPlugin: uma para GZIP (algorithm: 'gzip') e/ou uma para Brotli (algorithm: 'brotliCompress') com os níveis e opções que configurou.
- Limite e minRatio: evite comprimir recursos demasiado pequenos ou que não se comprimem o suficiente para justificar a sobrecarga.
- Padrão de recursos: uma expressão regular que corresponde apenas aos tipos de ficheiro que vale a pena comprimir — JS, CSS, HTML, SVG, JSON e WOFF2 por predefinição.
- Excerto de serviço do Nginx: as diretivas correspondentes gzip_static e brotli_static para servir os ficheiros pré-comprimidos a partir do seu servidor web.
Pré-compressão vs. compressão em tempo real
A compressão em tempo real (por exemplo, Nginx gzip on) comprime cada resposta no momento do pedido, acrescentando carga de CPU e latência. A pré-compressão com o plugin de compressão Webpack comprime os recursos uma vez no momento da compilação, pelo que o servidor simplesmente lê e serve o ficheiro pré-comprimido com zero custo de CPU por pedido. Para recursos estáticos com muito tráfego, a pré-compressão é sempre preferível. O gerador de configuração do plugin de compressão Webpack torna trivial adicionar pré-compressão a qualquer projeto baseado em webpack.
Perguntas frequentes
Um gerador de configuração do plugin de compressão Webpack produz um excerto de webpack.config.js pronto a usar que adiciona pré-compressão GZIP e/ou Brotli à sua compilação webpack através do pacote compression-webpack-plugin. Configure níveis de compressão, limite, minRatio e padrões de recursos, e o gerador emite as instâncias de plugin corretas instantaneamente. O nosso gerador online grátis funciona inteiramente no seu navegador e sem registo.
A compressão em tempo real (por exemplo, Nginx gzip on) comprime cada resposta HTTP no momento do pedido, acrescentando carga de CPU e latência. A pré-compressão com o plugin de compressão Webpack comprime os recursos uma vez no momento da compilação, pelo que o servidor apenas lê e serve o ficheiro .gz ou .br pré-comprimido sem qualquer custo de CPU por pedido. Para recursos estáticos com muito tráfego, a pré-compressão é sempre preferível.
Sim. O gerador de configuração do plugin de compressão Webpack funciona inteiramente no seu navegador: toda a geração de configuração é feita localmente com JavaScript. Nenhum detalhe do projeto, caminho de ficheiro ou dado de configuração é enviado para qualquer servidor. As suas definições nunca saem do dispositivo.
Sim. O gerador de configuração do plugin de compressão Webpack é 100 % grátis, sem registo, sem subscrição e sem limites. Gere configurações para tantos projetos quantos precisar.
Sim — o plugin de compressão Webpack cria ficheiros .gz e .br no momento da compilação, mas o seu servidor web tem de estar configurado para os servir. No Nginx, adicione gzip_static on para GZIP e brotli_static on para Brotli (requer o módulo ngx_brotli). No Apache, use mod_deflate com serviço de ficheiros pré-comprimidos. O gerador inclui o excerto de Nginx nos resultados.
Para GZIP, o nível 9 é recomendado em pré-compressão estática, já que o custo de CPU é pago uma vez na compilação. Para Brotli, a qualidade 11 alcança a compressão máxima — normalmente 20 a 26 % melhor do que GZIP nível 9. Em pipelines de CI/CD onde o tempo de compilação importa, use GZIP nível 6 e Brotli qualidade 6 para equilibrar taxa de compressão e velocidade de compilação.
A opção threshold (em bytes) indica ao plugin para ignorar a compressão de recursos mais pequenos do que o tamanho indicado. O valor predefinido de 10 240 bytes (10 KB) é um bom ponto de partida: comprimir ficheiros muito pequenos acrescenta sobrecarga sem poupanças significativas. Aumente este valor se quiser ignorar mais ficheiros pequenos, ou defina-o como 0 para comprimir tudo.
A opção minRatio indica ao plugin para não criar um ficheiro comprimido se a taxa de compressão não for suficientemente boa. Um minRatio de 0,8 significa: só criar o ficheiro comprimido se este ocupar no máximo 80 % do tamanho original (ou seja, pelo menos 20 % de poupança). Defina-o como 1 para criar sempre ficheiros comprimidos, ou reduza-o para exigir melhor compressão antes de criar o ficheiro.
Sim. No Create React App, use o react-app-rewired ou o CRACO para personalizar a configuração do webpack. No Angular CLI, use @angular-builders/custom-webpack. No Vue CLI, adicione o plugin em vue.config.js dentro de configureWebpack. O gerador produz uma configuração CompressionPlugin padrão que funciona com qualquer ferramenta de compilação baseada em webpack.