Formatador e minificador de JavaScript

Como formatar ou minificar JavaScript

1. Cola o teu código ou clica em Abrir um ficheiro para carregar um ficheiro .js, .mjs ou .jsx (até 10 MB).
2. Escolhe a Indentação e, se preferires o estilo Allman, marca Chavetas em linha própria.
3. Clica em Formatar (embelezar) para tornar o código legível.
4. Para o reduzir, define as Opções de minificação e clica em Minificar. Para procurar apenas erros, clica em Verificar a sintaxe.
5. Copia ou transfere o resultado. A linha de estado mostra o tamanho antes e depois, e a percentagem poupada.

O código é apenas lido e transformado, nunca executado: nada do que colas corre nesta página.

Formatar com o js-beautify

Formatar (embelezar) usa o js-beautify. Põe uma instrução por linha, indenta os blocos, acrescenta espaços à volta dos operadores e depois das palavras-chave, e mantém no máximo uma linha em branco onde as tinhas. Também entende a sintaxe moderna (classes, arrow functions, template literals, async/await) e JSX. É a forma mais rápida de ler uma biblioteca minificada ou um excerto numa só linha copiado de uma página web.

A formatação só mexe nos espaços. Não verifica se o código é válido: um parêntese em falta produz apenas uma indentação estranha. Para isso, usa Verificar a sintaxe.

Minificar com o Terser

Minificar usa o Terser, o minificador usado pela maioria das ferramentas de build de JavaScript. Como é grande, só é transferido quando clicas pela primeira vez em Minificar ou Verificar a sintaxe. As opções correspondem diretamente a definições do Terser:

• Módulo ES (import/export) analisa o código como módulo (module: true): aplica-se o modo estrito e os nomes de nível superior são privados, por isso podem ser renomeados e os que não são usados podem ser removidos. Deixa a opção desmarcada para um script clássico cujas funções globais sejam usadas por outros scripts.
• Comprimir (compress) reescreve o código numa versão equivalente e mais curta: avaliação de constantes (2*60 passa a 120), remoção de código morto, junção de declarações var, condições mais curtas.
• Encurtar nomes de variáveis (mangle) renomeia as variáveis locais e os parâmetros com uma ou duas letras. Os nomes globais e as propriedades de objetos nunca são renomeados.
• Manter os comentários de licença mantém os comentários que começam por /*! ou contêm @license ou @preserve. Todos os outros comentários são removidos.

A minificação não pode mudar o que o código faz, mas o código que dependa dos nomes das funções (fn.name) ou de eval pode comportar-se de outra forma depois de renomeado. Nesse caso, desmarca Encurtar nomes de variáveis.

Erros de sintaxe com linha e coluna

Quando o Terser não consegue analisar o código, Minificar e Verificar a sintaxe mostram a mensagem de erro com a linha e a coluna, por exemplo «Linha 12, coluna 8 – Erro de sintaxe: Unexpected token punc «)»». A coluna conta os caracteres a partir de 1. A mensagem do Terser em si está em inglês. Uma causa típica é um parêntese ou uma chaveta em falta mais acima no ficheiro, por isso olha também para as linhas logo antes da posição indicada.