Minificar JavaScript _

Como funciona a minificação de JavaScript

O Terser funciona em quatro etapas sobre a Árvore de Sintaxe Abstrata do seu código. Cada etapa é independente, por isso pode ativar ou desativar qualquer uma delas sem quebrar as outras.

1. Analisar. O Terser analisa o seu JavaScript numa AST. Qualquer erro de sintaxe aparece aqui com o token e a linha que o causaram, para que encontre o problema real antes de qualquer transformação ser executada. O analisador aceita todas as construções ECMAScript padrão até às propostas de estágio 4 mais recentes.
2. Comprimir. O compressor percorre a AST e aplica dezenas de transformações que preservam a semântica: avaliação de constantes, eliminação de ramos mortos, inlining de funções puras curtas, colapso de declarações var sequenciais e reescrita de formas de instrução equivalentes (if/else em ternários, encurtamento de cadeias de comparação, colapso de returns condicionais). Cada transformação é reversível em princípio; o compressor nunca altera o comportamento observável.
3. Ofuscar. O ofuscador renomeia os identificadores locais para os identificadores únicos mais curtos (a, b, c, …) dentro de cada âmbito. Apenas os nomes que não podem escapar ao limite do módulo são renomeados, por isso as ligações exportadas, as chaves de propriedade e as referências globais ficam intactas. O resultado é a maior economia de bytes de qualquer etapa.
4. Renderizar. O Terser imprime a AST transformada de volta para uma string JavaScript com espaços em branco colapsados e separadores de instrução reduzidos ao mínimo que a gramática aceita. Os comentários são removidos, a menos que o interruptor de preservação de licença mantenha os blocos /*! … */, que a maioria das licenças de CDN exige que sejam retidos.

Por que minificar JavaScript

• Carregamentos de página mais rápidos. Scripts menores são analisados e executados mais cedo. Numa ligação móvel 4G, uma redução de 40 por cento em bytes elimina segundos reais do Time to Interactive, que é a métrica que o Google PageSpeed Insights mede mais agressivamente.
• Faturas de egress de CDN menores. CloudFront, Cloudflare e Fastly cobram por gigabyte de egress. Uma redução de 40 por cento nos scripts ao longo de milhões de visualizações de página mensais acumula poupanças reais antes de qualquer trabalho em imagens ou CSS. A matemática funciona mesmo após gzip e brotli — a minificação remove tokens que o compressor teria de codificar de qualquer forma.
• Este minificador não sobrecarrega a sua página. O Terser tem cerca de 1 MB descomprimido. A maioria dos minificadores online inclui a biblioteca completa no carregamento da página, o que prejudica a sua própria pontuação no Lighthouse e torna a página lenta antes de o utilizador digitar qualquer coisa. Esta página carrega o Terser de forma lazy apenas quando clica em Minificar ou ativa o Modo ao vivo — para que a renderização inicial fique abaixo dos limites dos Core Web Vitals que a ferramenta promete ajudar a atingir.
• Passar nos Core Web Vitals. O Lighthouse e o PageSpeed Insights assinalam JavaScript grande como contribuinte direto para um Total Blocking Time fraco. A minificação de bibliotecas de vendor e bundles de aplicação é a vitória mais rápida nas auditorias "Reduzir JavaScript não utilizado" e "Remover módulos duplicados" do Lighthouse — geralmente uma redução única de dez a vinte pontos.

Aplicações comuns

A minificação de JavaScript aparece em quase todas as etapas de um projeto web moderno.

• Hooks de pré-commit: minifique scripts de utilitários individuais antes de os confirmar num repositório para que o artefacto confirmado esteja pronto para produção e o diff mostre alterações de lógica em vez de mudanças de espaço em branco.
• Auditorias de widgets de terceiros: cole o snippet de incorporação de um vendor e verifique se já está minificado ou se pode ser reduzido antes de ser servido a milhões de utilizadores.
• Limpeza de scripts legados: comprima plugins jQuery antigos e scripts escritos à mão que são anteriores ao seu pipeline de build atual, sem tocar na árvore de fontes.

Um exemplo prático

Tome uma pequena função: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — cerca de 130 bytes incluindo o comentário. Cole acima com Ofuscar e Comprimir ambos ativos. A saída encurta para aproximadamente function add(n,o){return n+o}console.log(add(1,2)); — cerca de 55 bytes, uma redução de 58 por cento. O nome da função add sobrevive porque é referenciado na chamada console.log; os nomes dos parâmetros firstNumber e secondNumber encurtam para letras únicas porque são locais ao corpo da função. Desative Ofuscar para manter nomes de parâmetros legíveis enquanto ainda colapsa espaços em branco e remove o comentário.

FAQ

Isto corre no meu navegador?

Sim. O Terser é carregado de forma lazy na primeira vez que clica em Minificar ou ativa o Modo ao vivo — cerca de 200 KB comprimidos ficam na cache do seu navegador, depois nada mais é descarregado. O seu código nunca sai da página.

O que é a ofuscação de nomes e é segura?

A ofuscação renomeia variáveis locais para letras únicas para economizar bytes. É segura para scripts autossuficientes e bundles IIFE porque os renomeamentos nunca saem do âmbito. NÃO é segura para scripts que expõem globais pelo nome (por exemplo, window.myLib = …) sem um invólucro. Desative Ofuscar quando não tiver certeza.

Por que o meu código quebrou após a minificação?

Três suspeitos habituais: eval ou with referenciando variáveis por string; leituras de Function.name ou arguments.callee que dependem do identificador original; ou globais expostas por um nome que foi renomeado. Desative Ofuscar primeiro para isolar se a renomeação ou uma transformação de Comprimir é a causa.

Isto suporta sintaxe moderna (ES2020+)?

Sim. Defina o alvo ECMAScript para ES2020 ou Next e o Terser preserva encadeamento opcional, coalescência nula, await de nível superior e operadores de atribuição lógica. Defina para ES5 e o Terser faz downgrade onde pode, mas não é um transpilador completo — use Babel para sintaxe que ES5 não consegue representar de todo.

A minificação de JavaScript no lado do navegador com Terser dá-lhe saída de qualidade de produção sem adicionar uma ferramenta de build. Cole um script, escolha o alvo ECMAScript, copie ou faça download do resultado. Nada é enviado, sem conta, sem pipeline de build. O minificador só carrega quando o solicita — por isso abrir esta página custa-lhe alguns kilobytes, não um megabyte.