Arquivos menores para produção, código legível para depuração
Este minificador reduz CSS, JavaScript e HTML para produção e mostra exatamente quanto você economizou: o tamanho original, o tamanho minificado e o tamanho após gzip, que é o que seus visitantes realmente baixam. JavaScript é minificado com terser, o minificador usado pela maioria das ferramentas de build modernas, e CSS com csso, que também mescla regras duplicadas. Mude para Formatar para transformar um bundle ou folha de estilos minificada de volta em código indentado e legível. Seu código é processado no navegador e nunca é enviado.
Como minificar ou formatar código
- 1Escolha a linguagem: CSS, JavaScript ou HTML. Soltar um arquivo
.css,.jsou.htmlna entrada já escolhe por você. - 2Escolha Minificar para reduzir o código ou Formatar para deixá-lo legível.
- 3Ajuste as opções: no JavaScript, se os nomes serão encurtados e o código comprimido; no CSS, se as regras serão reestruturadas; no HTML, se estilos e scripts inline serão minificados. Comentários de licença são mantidos, a menos que você desative isso.
- 4Confira os tamanhos abaixo do resultado para ver a economia antes e depois do gzip.
- 5Copie a saída ou baixe como
.min.js,.min.cssou.html.
O que a minificação faz
A minificação remove tudo o que o navegador não precisa para executar o código: comentários, indentação, quebras de linha e ponto e vírgula opcionais. Bons minificadores vão além. O terser renomeia variáveis locais para uma letra só (mangling), remove código inalcançável, pré-calcula expressões constantes e transforma instruções if em ternários. O csso encurta cores (#ff0000 vira red), remove unidades de valores zero e mescla regras com declarações ou seletores idênticos.
O resultado se comporta exatamente como o original, mas costuma ficar 30–70% menor em JavaScript e 15–40% menor em CSS antes da compressão.
Por que o tamanho gzip importa
Servidores web e CDNs comprimem arquivos de texto com gzip ou Brotli antes de enviá-los, então o número que afeta o tempo de carregamento é o tamanho comprimido, não o bruto. A compressão já elimina boa parte da repetição que a minificação ataca, por isso uma economia de 60% na minificação pode cair para 20% depois do gzip. Ainda assim vale a pena em cada visualização de página, e o mangling em especial continua compensando após a compressão.
O valor de gzip aqui usa o nível 6, o padrão do nginx e da maioria dos servidores. O Brotli geralmente fica mais 10–20% menor.
Opções explicadas
- Encurtar nomes
- Renomeia variáveis locais e parâmetros de função para nomes curtos. Nomes globais e propriedades de objetos nunca são renomeados, então o código chamado por outros scripts continua funcionando.
- Comprimir
- No JavaScript, as etapas de otimização do terser: remoção de código morto, constant folding, inlining. No CSS, a reestruturação do csso, que mescla e reordena regras quando é seguro.
- Manter comentários de licença
- Mantém comentários que começam com /*! ou contêm @license ou @preserve, que muitas licenças de código aberto exigem que você preserve.
- CSS e JS inline
- No HTML, minifica o conteúdo dos elementos <style> e <script> e dos atributos style. Blocos JSON-LD também são compactados; scripts de outros tipos ficam intactos.
- Remover aspas dos atributos
- Escreve class=nav em vez de class="nav" onde o HTML permite. É HTML válido, mas algumas ferramentas XML e sistemas de templates não gostam disso, por isso vem desativado.
Como o HTML é minificado
A minificação de HTML aqui é propositalmente conservadora. Comentários são removidos, exceto os comentários condicionais do Internet Explorer. Sequências de espaços viram um único espaço, e o espaço ao lado de elementos de bloco como <div> e <p>, onde nunca aparece, é removido. Um espaço é sempre mantido entre elementos inline, porque removê-lo juntaria <b>big</b> <i>world</i> em uma só palavra. O conteúdo de <pre> e <textarea> nunca é alterado.
Se um script inline tiver erro de sintaxe, ele fica exatamente como estava e você é avisado da linha, em vez de a página inteira falhar.
Formatar código minificado
Formatar usa o js-beautify para reindentar o código: uma instrução por linha no JavaScript, uma declaração por linha no CSS e indentação aninhada no HTML. É o jeito mais rápido de ler um script de terceiros minificado ou entender uma folha de estilos copiada do navegador. Não é possível recuperar os nomes de variáveis ou comentários originais removidos pelo minificador, mas a estrutura fica fácil de acompanhar.
Para outros formatos, veja o formatador JSON e o formatador SQL.
Perguntas frequentes
- Meu código é enviado para algum lugar?
- Não. terser, csso e js-beautify rodam no seu navegador, então seu código fica no seu dispositivo.
- O JavaScript minificado continua funcionando?
- Sim. O terser só faz mudanças que preservam o comportamento. Código que depende de nomes de funções ou classes em tempo de execução, como alguns frameworks de injeção de dependência, pode exigir que você desative o encurtamento de nomes.
- Suporta JavaScript moderno e ES modules?
- Sim. O terser entende sintaxe moderna, incluindo classes, async/await, optional chaining e top-level await. Arquivos com instruções import ou export são minificados como ES modules.
- Dá para minificar TypeScript ou JSX?
- Não. Compile TypeScript ou JSX para JavaScript primeiro e depois minifique o resultado. Se o código não for JavaScript puro, aparece um erro de sintaxe com linha e coluna.
- Qual a diferença entre minificar e gzip?
- Minificar reescreve o próprio código para ficar mais curto. Gzip é uma compressão que o servidor aplica a qualquer arquivo ao enviá-lo. Os dois trabalham juntos: minifique primeiro e deixe o servidor comprimir.
- Posso desminificar JavaScript ou CSS?
- Sim. Escolha Formatar para reindentar o código minificado. Os nomes de variáveis e comentários originais não podem ser recuperados, mas a estrutura fica legível.
- Por que meu CSS está tendo regras mescladas ou reordenadas?
- É a reestruturação do csso, que mescla regras com as mesmas declarações ou seletores. É segura para folhas de estilo normais; desative Comprimir se você depende de uma ordem exata de regras entre seletores com a mesma especificidade.