Minificador de JS

O Minificador de JS é uma ferramenta gratuita que remove carateres desnecessários do JavaScript e apresenta o número de carateres antes e depois da minificação.

Que problema resolve a minificação de JavaScript?

A minificação de JavaScript reduz a quantidade de código-fonte que o navegador tem de descarregar. Normalmente, remove formatação como indentação, quebras de linha e espaços quando esses carateres não são necessários para a sintaxe do JavaScript.

Um script mais pequeno pode reduzir o volume transferido e o trabalho de análise, sobretudo quando um site disponibiliza vários pacotes de grandes dimensões. A compressão HTTP, como Brotli ou gzip, continua a ser importante, pois a minificação e a compressão durante a transferência resolvem partes diferentes do problema. A minificação remove carateres do código-fonte, enquanto a compressão codifica dados repetidos de forma mais compacta durante a transferência.

Esta operação costuma fazer parte do processo de compilação anterior à publicação. Também é útil para verificar um script de terceiros que não esteja minificado, comparar tamanhos de pacotes ou preparar um ficheiro autónomo para um site sem um fluxo de compilação.

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

Como utilizo o Minificador de JS?

Cola o JavaScript no campo JS, executa a ferramenta e copia o valor apresentado em JS minificado. Mantém o ficheiro-fonte original no controlo de versões e publica a cópia compacta, em vez de substituíres o código legível.

1. Começa por executar uma verificação de sintaxe, um linter e testes automatizados no código-fonte.
2. Cola o script completo em JS, incluindo quaisquer importações de módulos ou funções de encapsulamento que façam parte do ficheiro.
3. Consulta Carateres de JS e Carateres de JS minificado para veres a diferença no número de carateres.
4. Confirma que o JavaScript minificado é executado corretamente no mesmo navegador e contexto de publicação do ficheiro usado em produção.
5. Usa um nome de ficheiro facilmente identificável, como app.min.js, se guardares juntas as versões minificada e legível.

O processamento é feito no servidor. Os dados introduzidos são enviados para o servidor através de HTTPS e não são armazenados. Ainda assim, o servidor tem de receber o JavaScript para o processar. Não envies código-fonte que a tua organização proíba transmitir a um serviço externo.

O que contém o resultado minificado?

O resultado contém o JavaScript compacto e duas contagens de carateres. Carateres de JS corresponde ao comprimento dos dados introduzidos, enquanto Carateres de JS minificado indica o comprimento do valor devolvido em JS minificado.

As contagens são calculadas com a função mb_strlen do PHP, que mede o comprimento de cadeias multibyte em vez de se limitar a indicar o número de bytes. Por isso, o número de carateres não corresponde necessariamente ao tamanho final transferido pela rede. Os carateres UTF-8 podem ocupar mais de um byte, e gzip ou Brotli podem reduzir ainda mais o ficheiro transmitido.

Esta ferramenta não apresenta um campo separado de validação ou diagnóstico. Não esperes que identifique todos os parênteses em falta, expressões regulares malformadas ou funcionalidades da linguagem que não sejam suportadas. Em particular, os erros associados a JSON, como nomes de propriedades sem aspas ou vírgulas finais, não são verificações fiáveis de JavaScript, porque a sintaxe dos literais de objetos JavaScript é diferente da sintaxe JSON. Usa o Validador e embelezador de JSON para dados JSON.

Exemplos simples e casos mais delicados

Uma alteração simples ao espaçamento pode ser representada da seguinte forma.

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 das respetivas propriedades.

Entrada

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

Forma compacta

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

A formatação exata pode variar entre minificadores, sobretudo no tratamento de pontos e vírgulas opcionais. Não é seguro compactar JavaScript eliminando indiscriminadamente todos os espaços ou quebras de linha. Uma minificação segura tem de considerar o contexto lexical e sintático para distinguir a formatação dos carateres que afetam o programa.

• Espaços em cadeias de texto são dados. O espaço em "Newcastle upon Tyne" tem de ser mantido.
• A pontuação pode fazer parte da sintaxe. Remover o espaço de a + +b pode produzir uma sequência de tokens diferente.
• As quebras de linha podem afetar a inserção automática de pontos e vírgulas, incluindo no código que aparece depois de return, break ou continue. Não é permitida uma quebra de linha imediatamente após throw, porque a respetiva expressão tem de começar na mesma linha.
• Os carateres acentuados e não latinos podem surgir em cadeias de texto e, quando as regras dos identificadores JavaScript o permitem, em identificadores. O seu tamanho em bytes pode ser diferente do número de carateres.
• Os números são tokens do código-fonte, não instruções para a contagem de carateres. Um minificador tem de preservar o respetivo valor numérico, mesmo que escolha uma notação equivalente mais curta.

Quando não compensa minificar JavaScript?

Normalmente, não compensa repetir a minificação quando um ficheiro já está minificado. Uma segunda passagem pode poupar pouco ou nada, além de dificultar o rastreio dos resultados da compilação e poder interferir com mapas de código-fonte existentes.

Também há pouca vantagem em formatar e voltar a minificar JavaScript que apenas será lido por uma máquina. Mantém uma versão legível do código-fonte para fins de manutenção e gera a partir dela os artefactos de publicação. Numa aplicação já estabelecida, uma ferramenta de compilação como esbuild, Rollup ou webpack costuma ser mais adequada, pois pode automatizar o agrupamento de módulos e a criação de mapas de código-fonte. A minificação pode estar integrada ou ser adicionada através da configuração ou de um plugin, enquanto o Terser é um minificador dedicado.

Não confundas minificação com ofuscação ou controlo de acesso. Os nomes de funções e variáveis podem continuar visíveis, os literais de texto continuam a poder ser lidos e as ferramentas de programador do navegador conseguem reformatar código compacto. Nunca incluas segredos, chaves privadas ou credenciais privilegiadas em JavaScript executado no lado do cliente.

Se estiveres a preparar todos os recursos estáticos de uma página, o Minificador de CSS e o Minificador de HTML podem aplicar a operação equivalente a esses formatos. Usa uma ferramenta diferente para cada formato, pois as respetivas regras de análise e de espaços em branco não são iguais.

Perguntas frequentes

A ferramenta cria um mapa de código-fonte?

Não é apresentado qualquer campo de mapa de código-fonte. Se precisares de associar os rastreios de erros em produção aos ficheiros originais, gera o script minificado e o ficheiro .map correspondente no mesmo processo de compilação. Publicar um mapa de código-fonte proveniente de outra compilação pode produzir referências incorretas a linhas e colunas.

A minificação impede que copiem o meu JavaScript?

Não. Os navegadores têm de receber código executável no lado do cliente, pelo que qualquer visitante pode descarregá-lo e analisá-lo. A minificação torna o código-fonte menos legível, mas não garante confidencialidade, não impõe o cumprimento de licenças nem oferece proteção significativa a segredos incluídos no código.

Posso colar código que contenha chaves de API?

Não deves colar chaves de API secretas, tokens ou credenciais privadas. Os dados introduzidos são enviados através de HTTPS e não são armazenados, mas o processamento ocorre no servidor. As chaves públicas para navegadores, distribuídas deliberadamente a todos os visitantes, continuam a precisar de restrições de domínio, origem, quota ou permissões, quando o serviço em causa as disponibilizar.

Um número menor de carateres faz sempre a página carregar mais depressa?

Não. O efeito depende do tamanho original do ficheiro, da cache, das condições da ligação, da compressão do servidor e da quantidade de JavaScript que o navegador tem de analisar e executar. Além do total de carateres, verifica o tamanho comprimido da transferência e o comportamento durante a execução.

Devo manter a extensão .js depois da minificação?

Sim. O JavaScript minificado costuma manter a extensão .js, sendo .min.js usada por convenção quando existem ambas as versões. Antes da publicação, confirma que o servidor envia um tipo de conteúdo adequado a JavaScript e que o HTML ou a importação do módulo aponta para o ficheiro pretendido.