Desenvolvimento Web

JS Minify / Beautify

Comprimir JavaScript para produção ou formatar código minificado em um formato legível.


                        
                    

Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.

How to use it

Common uses

Things to keep in mind

Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.

Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.

Artigo sobre esta ferramenta: Minificação de JavaScript: a diferença entre minificar e ofuscar

Perguntas frequentes

Qual ferramenta o minificador usa por baixo dos panos?

Ele usa o terser, um minificador e compressor de JavaScript amplamente usado que também entende sintaxe moderna.

Por que JavaScript minificado é mais difícil de depurar?

O Terser encurta nomes de variáveis e funções e remove espaços em branco e comentários, e como esta ferramenta não gera um source map, as ferramentas de desenvolvedor do navegador não conseguem mapear o código minificado de volta às linhas originais legíveis.

A minificação vai quebrar meu código?

Para JavaScript sintaticamente válido, a minificação preserva o comportamento; se houver um erro de sintaxe, a ferramenta reporta a linha e coluna para que você possa corrigi-lo antes de minificar — tudo roda localmente sem enviar seu código.

Qual a diferença entre tree shaking e minificação?

O tree shaking remove do bundle o código que não é usado em lugar nenhum, analisando o grafo de dependências dos módulos durante o build, enquanto a minificação apenas encurta a representação textual do código já existente — ela não remove nenhuma função que realmente seja executada.

É seguro usar JavaScript minificado em produção sem testes extras?

Sim, a minificação é uma transformação puramente sintática que mantém o comportamento do programa idêntico; qualquer diferença de comportamento após minificar aponta para um bug no próprio minificador, não para uma mudança intencional na lógica.

Artigos: Desenvolvimento Web

HEX, RGB, HSL: por que existem tantas formas de escrever uma cor

Por que designers costumam preferir HSL em vez de HEX ao escolher um tom de cor à mão.

Minificação de CSS: o que é realmente removido do arquivo, e por quê

Por que o CSS minificado funciona exatamente igual no navegador, mesmo se tornando ilegível para um humano.

Minificação de HTML: por que os espaços na marcação importam

Por que remover espaços dentro de <pre> ou de um textarea pode quebrar a aparência da página, ao contrário de quase todo o resto.

Gradientes CSS: como linear difere de radial e conic

Por que conic-gradient serve para gráficos de pizza enquanto radial-gradient cria um efeito de mancha de luz.

O algoritmo de Luhn: como um número de cartão é verificado quanto à correção

Por que um número de cartão que passa na verificação de Luhn não significa que esse cartão realmente existe.

IBAN: como é estruturado um número de conta bancária internacional

Por que as duas primeiras letras de um IBAN são um código de país, não parte do número da conta em si.

Códigos QR: como um link cabe em um quadrado de pixels

Por que um código QR com um logo no meio ainda é escaneado mesmo com parte do padrão coberta.

Códigos de barras: como Code 128 difere do EAN-13

Por que produtos nas prateleiras das lojas quase sempre usam EAN-13 em vez de Code 128.

Imagens placeholder: por que imagens falsas importam durante o desenvolvimento

Por que desenvolvedores deliberadamente colocam retângulos cinzas em vez de fotos reais enquanto um layout ainda está sendo construído.