Minifique um script de 40 KB à mão e você desiste depois do primeiro bloco de comentários. Um minificador de código faz isso de uma vez: remove espaços em branco e comentários, encurta nomes locais e reescreve expressões em formas mais curtas. Este trata JavaScript (com o Terser) e CSS (com o csso) e mostra o resultado ao lado da sua entrada enquanto você digita.
Minificando um script, passo a passo
- Escolha JavaScript ou CSS no topo. A caixa de entrada se enche com um exemplo curto.
- Cole o seu código por cima. A saída se atualiza cerca de 300 ms depois que você para de digitar.
- Ajuste as opções. Para JavaScript, são Comprimir o código, Embaralhar nomes de variáveis, Embaralhar nomes de nível superior, Manter nomes de classes e funções, Remover chamadas console.*, Remover instruções debugger, o alvo ECMAScript e o tratamento dos comentários.
- Leia a linha de bytes sob as caixas e depois aperte Copiar ou Baixar. O arquivo se chama
script.min.jsoustyles.min.css.
Quais chaves de JavaScript importam na prática
O embaralhamento encurta os nomes de variáveis locais e parâmetros. cartTotal(items, taxRate) vira algo como n(t,o) dentro da sua função. Os nomes de nível superior são outra história. Eles ficam intocados por padrão, porque outro arquivo ou um onclick em linha pode chamá-los pelo nome. Ligue Embaralhar nomes de nível superior apenas para código totalmente autocontido, como um módulo que você mesmo empacota.
Remover console.* tira toda chamada, inclusive as que trazem um resultado que você usa em uma expressão. Leia a saída se você depende de logs. Manter nomes de classes e funções importa quando o seu código lê .name ou quando os stack traces precisam continuar legíveis.
O que o csso faz com uma folha de estilo
O csso reescreve margin: 0px 0px 0px 0px como margin:0, encurta cores e remove comentários. Com Reestruturar regras ligado, ele também junta regras que compartilham declarações: dois seletores com o mesmo color e background-color viram uma regra separada por vírgulas. Isso é seguro para a maioria dos arquivos. Se a sua cascata depende da ordem exata das regras, desligue. Propriedades personalizadas e blocos @media ficam no lugar.
Números de tamanho e onde deixam de ser exatos
A ferramenta conta bytes UTF-8, não caracteres, então um arquivo cheio de letras acentuadas ou emojis é medido do jeito que um servidor o envia. Se o seu navegador tem CompressionStream, uma linha de gzip mostra também os dois tamanhos. O código minificado costuma diminuir menos depois do gzip do que antes, porque o gzip já elimina espaços em branco repetidos.
A entrada é limitada a 2.000.000 de caracteres. Um erro de sintaxe em JavaScript mostra a linha e a coluna. O csso, por outro lado, não relata erros de CSS: uma declaração quebrada pode sumir da saída sem mensagem. HTML não é minificado aqui.
Teste antes de publicar e o que fica no seu navegador
Minificar muda o código. A ferramenta não promete comportamento idêntico para código incomum, então rode seus próprios testes no arquivo minificado. O Terser e o csso rodam nesta página. O primeiro uso carrega o arquivo da biblioteca deste site, o que você vê no painel de rede. Depois disso, apertar um botão não envia nada. O seu código não é enviado, e a ferramenta nunca o executa.