Minificador de JS

O Minificador de JS é uma ferramenta gratuita que remove caracteres desnecessários do JavaScript e informa a quantidade de caracteres antes e depois da minificação.

Que problema a minificação de JavaScript resolve?

A minificação de JavaScript reduz a quantidade de código-fonte que o navegador precisa baixar. Em geral, ela remove elementos de formatação, como recuos, quebras de linha e espaços, quando esses caracteres não são exigidos pela sintaxe do JavaScript.

Um script menor pode reduzir o volume transferido e o trabalho de análise, principalmente quando um site distribui vários pacotes grandes. A compactação HTTP, como Brotli ou gzip, continua importante, pois a minificação e a compactação na transferência atuam em partes diferentes do problema. A minificação remove caracteres do código-fonte, enquanto a compactação codifica dados repetidos de forma mais eficiente durante a transferência.

Normalmente, essa operação faz parte do processo de build antes da implantação. Ela também é útil para verificar um script de terceiros que não foi minificado, comparar tamanhos de pacotes ou preparar um arquivo independente para um site sem pipeline de build.

A minificação não comprova que o JavaScript funciona corretamente. Um script pode ser minificado com sucesso e ainda conter chamadas incorretas de API, variáveis inacessíveis ou código que só apresenta falhas durante a execução.

Como usar o Minificador de JS?

Cole o JavaScript no campo JS, execute a ferramenta e copie o valor retornado em JS minificado. Mantenha o arquivo-fonte original no controle de versão e implante a cópia compacta, em vez de substituir o código legível.

1. Primeiro, execute uma verificação de sintaxe, um linter e testes automatizados no código-fonte.
2. Cole o script completo em JS, incluindo todas as importações de módulos ou funções de encapsulamento que façam parte do arquivo.
3. Confira Caracteres do JS e Caracteres do JS minificado para ver a diferença na quantidade de caracteres.
4. Teste se o JavaScript minificado é executado corretamente no mesmo navegador e no mesmo contexto de implantação do arquivo de produção.
5. Use um nome de arquivo fácil de reconhecer, como app.min.js, se as versões minificada e legível forem armazenadas juntas.

O processamento é feito no servidor. O conteúdo inserido é enviado ao servidor por HTTPS e não é armazenado. Ainda assim, o servidor precisa receber o JavaScript para processá-lo. Portanto, não envie código-fonte que sua organização proíba compartilhar com um serviço externo.

O que o resultado minificado contém?

O resultado contém o JavaScript compactado e duas contagens de caracteres. Caracteres do JS corresponde ao tamanho da entrada, enquanto Caracteres do JS minificado indica o tamanho do conteúdo retornado em JS minificado.

As contagens são geradas pela função mb_strlen do PHP, que mede o comprimento de strings multibyte, em vez de simplesmente informar o número de bytes. Por isso, a quantidade de caracteres não equivale ao tamanho final transferido pela rede. Caracteres UTF-8 podem ocupar mais de um byte, e gzip ou Brotli podem reduzir ainda mais o arquivo transmitido.

Esta ferramenta não retorna um campo separado de validação ou diagnóstico. Não espere que ela identifique todos os colchetes ausentes, todas as expressões regulares malformadas ou todos os recursos de linguagem incompatíveis. Em especial, erros associados a JSON, como nomes de propriedades sem aspas ou vírgulas finais, não são verificações confiáveis de JavaScript, pois a sintaxe de objetos literais em JavaScript é diferente da sintaxe de JSON. Use o Validador e embelezador de JSON para dados JSON.

Exemplos simples e entradas problemáticas

Uma alteração simples de espaçamento pode ser representada assim.

Entrada

function add(a, b) { return a + b; }

Forma compacta

function add(a,b){return a+b;}

A formatação em torno de um objeto também pode ser removida sem alterar os valores de suas propriedades.

Entrada

const settings = { theme: "dark", retries: 2 };

Forma compacta

const settings={theme:"dark",retries:2};

A formatação exata pode variar entre minificadores, principalmente em relação a pontos e vírgulas opcionais. Não é seguro compactar JavaScript simplesmente removendo todos os espaços e todas as quebras de linha. Uma minificação segura precisa considerar o contexto léxico e sintático para distinguir a formatação dos caracteres que afetam o programa.

• Espaços em strings fazem parte dos dados. O espaço em "Newcastle upon Tyne" precisa ser mantido.
• Sinais de pontuação podem fazer parte da sintaxe. Remover o espaço de a + +b pode produzir uma sequência de tokens diferente.
• Quebras de linha às vezes afetam a inserção automática de ponto e vírgula, inclusive em códigos após return, break ou continue. Não é permitida uma quebra de linha imediatamente depois de throw, pois sua expressão precisa começar na mesma linha.
• Caracteres acentuados e não latinos podem aparecer em strings e, quando as regras de identificadores do JavaScript permitirem, em identificadores. O tamanho em bytes pode ser diferente da quantidade de caracteres.
• Números são tokens do código-fonte, não instruções de contagem de caracteres. O minificador precisa preservar seu valor numérico, mesmo que escolha uma notação equivalente mais curta.

Quando não vale a pena minificar JavaScript?

Em geral, não vale a pena repetir a minificação quando o arquivo já está minificado. Uma segunda execução pode reduzir pouco ou nada, além de dificultar o rastreamento do resultado do build e possivelmente interferir nos mapas de origem existentes.

Também há pouca vantagem em formatar e depois minificar um JavaScript que será lido apenas por uma máquina. Mantenha um código-fonte legível para facilitar a manutenção e gere a partir dele os artefatos de implantação. Em uma aplicação consolidada, uma ferramenta de build como esbuild, Rollup ou webpack costuma ser mais adequada, pois pode automatizar o empacotamento de módulos e a geração de mapas de origem. A minificação pode vir integrada ou ser adicionada por configuração ou plugin, enquanto o Terser é um minificador dedicado.

Não trate a minificação como ofuscação ou controle de acesso. Os nomes de funções e variáveis podem continuar visíveis, strings literais ainda podem ser lidas e as ferramentas de desenvolvimento do navegador conseguem reformatar o código compactado. Segredos, chaves privadas e credenciais privilegiadas nunca devem ser incorporados ao JavaScript executado no cliente.

Se estiver preparando todos os recursos estáticos de uma página, o Minificador de CSS e o Minificador de HTML podem aplicar a operação correspondente a esses formatos. Use uma ferramenta específica para cada formato, pois as regras de análise e de espaços em branco são diferentes.

Perguntas frequentes

A ferramenta gera um mapa de origem?

Não é retornado nenhum campo de mapa de origem. Se precisar relacionar os rastreamentos de pilha da produção aos arquivos originais, gere o script minificado e o arquivo .map correspondente no mesmo processo de build. Implantar um mapa de origem de outro build pode produzir referências incorretas de linha e coluna.

A minificação impede que copiem meu JavaScript?

Não. Os navegadores precisam receber o código executável no cliente, portanto qualquer visitante pode baixá-lo e inspecioná-lo. A minificação torna o código-fonte menos legível, mas não oferece confidencialidade, garantia de cumprimento de licenças nem proteção significativa para segredos incorporados.

Posso colar código que contém chaves de API?

Não cole chaves de API secretas, tokens nem credenciais privadas. A entrada é enviada por HTTPS e não é armazenada, mas o processamento ocorre no servidor. Chaves públicas de navegador distribuídas intencionalmente a todos os visitantes ainda precisam de restrições de domínio, origem, cota ou permissão, quando o serviço correspondente oferecer esses controles.

Uma contagem menor de caracteres sempre faz a página carregar mais rápido?

Não. O efeito depende do tamanho original do arquivo, do cache, das condições da conexão, da compactação do servidor e da quantidade de JavaScript que o navegador precisa analisar e executar. Verifique o tamanho compactado da transferência e o comportamento durante a execução, além do total de caracteres.

Devo manter a extensão .js depois de minificar?

Sim. O JavaScript minificado normalmente mantém a extensão .js, e .min.js é usada como convenção de nomenclatura quando as duas versões estão presentes. Antes da implantação, confirme se o servidor envia um tipo de conteúdo apropriado para JavaScript e se o HTML ou a importação do módulo aponta para o arquivo correto.