O que a minificação de JavaScript faz
Minificar JavaScript reduz o tamanho do arquivo sem mudar o que ele executa. O processo remove espaços, quebras de linha e comentários, e um minificador moderno também encurta nomes de variáveis e funções locais e simplifica expressões, como resolver contas entre constantes ou eliminar código que nunca roda. O comportamento do programa fica idêntico: só a forma escrita muda. É por isso que praticamente todo site em produção serve JavaScript minificado, enquanto a versão legível, com nomes descritivos e comentários, fica guardada no código-fonte do projeto.
O que é mangle e por que ele economiza tanto
Mangle é a etapa que renomeia variáveis e funções locais para nomes curtos, trocando algo como calcularTotal por uma única letra. Como esses nomes só valem dentro do próprio escopo, encurtá-los não afeta o resto do programa e costuma ser onde mais se economiza bytes, já que nomes descritivos se repetem muito. O terser mantém intactos os nomes que precisam continuar iguais, como variáveis globais e propriedades de objetos acessadas de fora, para não quebrar integrações. Você pode desligar o mangle se quiser um resultado mais fácil de depurar.
Minificação, source maps e código de módulo
Depois de minificar, o código fica difícil de ler, o que atrapalha a depuração em produção. A solução usada por bundlers é o source map, um arquivo que mapeia o código minificado de volta para o original, permitindo depurar como se ele não estivesse compactado. O terser, motor desta ferramenta, é o mesmo que webpack e Rollup usam por baixo. Ele também entende JavaScript moderno: quando detecta import e export no topo, trata o arquivo como módulo ES, aplicando as regras corretas de escopo e modo estrito na hora de minificar.
Como usar esta ferramenta
- Cole o JavaScript ou envie um arquivo .js.
- Escolha se quer encurtar os nomes de variáveis (mangle).
- Copie o JavaScript minificado no resultado.
Perguntas Frequentes (FAQ)
- O código é enviado para algum servidor?
- Não. Todo o processamento roda no seu navegador com o terser; nada é enviado ou salvo.
- O que a opção mangle faz?
- Ela encurta os nomes de variáveis e funções locais (por exemplo, de contador para c), o que reduz ainda mais o tamanho. Nomes globais e propriedades públicas são mantidos.
- Serve para código moderno (ES modules)?
- Sim. A ferramenta detecta import e export no topo e trata o código como módulo ES quando necessário.
