Comprimir JavaScript
Cole o JavaScript no campo para remover caracteres desnecessários. Copie o código comprimido e compare os tamanhos exibidos antes e depois.
Ferramenta de Minificação de JavaScript
Fórmula de Compressão de JavaScript
Onde:
- \(L_{\mathrm{in}}\) — o comprimento da cadeia de entrada, tal como medido pelo JavaScript.
- \(N_{\mathrm{LF}}\) — o número de caracteres de quebra de linha na entrada.
- \(L_{\mathrm{out}}\) — o comprimento da cadeia do código comprimido.
- \(d\) — o valor exibido como “Antes”; \(R\) — a taxa de compressão exibida.
A ferramenta comprime a entrada com um empacotador de JavaScript e depois compara o comprimento do resultado com o comprimento ajustado da entrada. Uma taxa positiva significa que a saída é mais curta segundo essa medida.
Compressão de JavaScript – Exemplo de Cálculo
Exemplo: use a função padrão, que regista “hello”. A sua fonte tem 43 caracteres, incluindo duas quebras de linha. O resultado comprimido é function test(){console.log("hello")}, com um comprimento de 37 caracteres.
\[d=43+2=45\qquad R=\frac{\operatorname{round}\!\left(1000\frac{45-37}{45}\right)}{10}\%=17.8\%\]
Resultado: Antes: 45B; Depois: 37B; Taxa de compressão: 17,8%. O valor “Antes” é maior do que o comprimento de 43 caracteres da cadeia de origem porque esta ferramenta acrescenta uma contagem por cada quebra de linha quando a entrada não tem retornos de carro.
Como usar a calculadora
- Cole ou escreva a sua fonte em Código JavaScript a Comprimir. O campo começa com uma pequena função de exemplo que pode substituir.
- Execute a calculadora para gerar o Código Comprimido. Um campo vazio produz uma mensagem “Introduza o código” em vez de um resultado.
- Reveja a saída e os valores de Antes, Depois e Taxa de compressão. Use o controlo de cópia para levar o código comprimido para o seu projeto.
- Teste o código copiado no ambiente pretendido antes de o implementar.
O que significa compressão de JavaScript aqui
Esta ferramenta torna a fonte JavaScript mais compacta ao passá-la por um empacotador com as opções de codificação adicional e encolhimento de variáveis desativadas. O objetivo é remover caracteres desnecessários à sintaxe do código, como comentários elegíveis e espaços em branco. O resultado costuma ser mais difícil de ler do que o original, por isso guarde uma cópia editável da sua fonte.
Uma fonte mais pequena pode reduzir a quantidade de JavaScript transferida para um navegador, mas a taxa exibida não é uma previsão da melhoria no carregamento da página. Os servidores podem aplicar gzip ou Brotli, o que pode alterar a diferença nos bytes transferidos. O tempo de descarregamento também depende da cache, das condições de rede e do resto da página. Para um olhar mais atento ao comprimento de ficheiros ou de texto, compare o resultado com a calculadora Tamanho de Texto.
A minificação é diferente da ofuscação. O código compacto continua a ser fonte JavaScript e pode ser relativamente fácil de inspecionar. Se estiver a comparar estas abordagens, o Ofuscador de JavaScript (eval) produz um tipo diferente de saída; a ferramenta Descodificador Eval de JavaScript destina-se a examinar código empacotado com eval, e não a reverter a minificação comum.
Pressupostos e limitações práticas
As etiquetas de tamanho dizem “B”, mas o cálculo usa comprimentos de cadeias JavaScript, e não o número de bytes de um ficheiro UTF-8 guardado. O JavaScript conta unidades de código UTF-16, pelo que caracteres não ASCII podem fazer com que os valores reportados difiram dos tamanhos reais dos ficheiros. A ferramenta também acrescenta uma contagem por quebra de linha ao comprimento da entrada quando não há retornos de carro. Esse ajuste afeta a taxa reportada; não acrescenta caracteres ao código comprimido.
A compressão pode pouvar muito pouco em código que já é compacto, e é possível obter uma taxa negativa se a saída for mais longa segundo a medição da ferramenta. Não trate uma taxa positiva como prova de que o comportamento ficou inalterado. A sintaxe do JavaScript pode ser sensível a quebras de linha e a certos comentários, e os empacotadores mais antigos podem não suportar todas as funcionalidades modernas da linguagem. Teste o resultado, especialmente quando o seu código usa sintaxe recente ou depende de a conservação de comentários.
Para trabalho de produção, conserve a fonte legível e valide a versão comprimida com os seus testes e navegadores-alvo habituais. Compare os tamanhos reais dos ficheiros servidos se o tamanho de transferência for importante. Se precisar de verificar separadamente a contagem de caracteres de uma cadeia de origem, use o Contador de Caracteres; a sua contagem não precisa de coincidir com o valor “Antes” ajustado desta ferramenta.
Perguntas frequentes
Como posso comprimir JavaScript manualmente?
Comece por remover os comentários que não são necessários em tempo de execução e por reduzir os espaços em branco onde não separam tokens. Depois verifique o resultado num analisador de JavaScript e execute os seus testes. Evite eliminar quebras de linha às cegas: uma quebra de linha pode afetar a forma como uma instrução é interpretada. Para mais do que um pequeno fragmento, um minificador consagrado é mais seguro do que a edição manual.
Remover comentários de JavaScript pode partir alguma coisa?
Sim. Alguns comentários contêm instruções para ferramentas de compilação, requisitos de licenciamento ou referências a source maps. Certos comentários também podem afetar a forma como o código é analisado. Verifique quais os comentários que o seu projeto tem de conservar antes de o comprimir e não presuma que o código que parece inalterado se vai comportar da mesma forma. Teste a saída no ambiente pretendido.
Qual é uma boa taxa de compressão de JavaScript?
Não existe um alvo universal. A fonte legível com indentação e comentários costuma ter mais caracteres removíveis do que o código que já foi minificado. Avalie o resultado em relação à mesma fonte e ao mesmo método de medição e depois verifique o ficheiro efetivamente entregue aos utilizadores. Uma percentagem elevada não serve de nada se a saída falhar nos testes ou remover comentários de que precisa.
Porque pode o JavaScript comprimido ficar mais longo do que o original?
Uma entrada muito curta ou já compacta pode ter pouco a remover, enquanto um empacotador pode acrescentar ou manter caracteres para que a saída continue válida. O resultado pode, portanto, ser mais longo segundo o cálculo de comprimento desta ferramenta. Uma taxa negativa não significa que o código seja inválido; significa que esta transformação em particular não reduziu o comprimento medido.
Como descubro o tamanho UTF-8 real do código comprimido?
Guarde a saída como um ficheiro UTF-8 e verifique o tamanho em bytes, ou meça-a em JavaScript com new TextEncoder().encode(code).length. Isto importa quando a fonte contém caracteres não ASCII: a sua contagem de bytes UTF-8 pode diferir do comprimento da cadeia exibido pela calculadora. Verifique o ficheiro guardado se a sua codificação ou as terminações de linha puderem mudar.
Ainda preciso de gzip ou Brotli depois de minificar o JavaScript?
Normalmente, sim. A minificação remove caracteres da fonte, enquanto o gzip e o Brotli comprimem os bytes enviados pela rede; os métodos podem ser usados em conjunto. As suas poupanças não se somam de forma simples, porque a compressão já pode lidar bem com os espaços em branco repetidos. Compare os tamanhos de transferência com as mesmas definições do servidor em vez de os estimar a partir da percentagem de minificação.
Como posso depurar JavaScript depois de o comprimir?
Guarde a fonte original e gere um source map se a sua ferramenta de compilação suportar. Um source map permite que as ferramentas de programador do navegador relacionem as localizações no ficheiro compacto com a fonte legível. Esta calculadora não gera um source map, por isso conserve uma versão de fonte identificável e teste-a antes de substituir um ficheiro implementado.