Pular para o conteúdo
🛠️
Whiz Tools

Minificador de JavaScript - Otimizador Online Gratuito de Código JS

Ferramenta gratuita de minificação de JavaScript para reduzir o tamanho do código removendo espaços em branco e comentários. Otimize arquivos JS instantaneamente sem necessidade de instalação.

Minificador de JavaScript

Sobre esta ferramenta

Este simples minificador de JavaScript remove espaços em branco e comentários desnecessários para reduzir o tamanho do seu código. Preserva a funcionalidade enquanto torna seu código mais compacto.

  • Remove espaços em branco desnecessários (espaços, tabulações, novas linhas)
  • Remove comentários (de linha única e de múltiplas linhas)
  • Preserva literais de string e expressões regulares
  • Mantém a funcionalidade do código
Calculadora de carregamento...
📚

Documentação

O que é um minificador de JavaScript?

Um minificador de JavaScript é uma ferramenta que reduz o código-fonte JavaScript removendo caracteres de que o navegador não precisa para executá-lo, como espaços extras, quebras de linha e comentários. Depois da minificação, o código continua fazendo exatamente a mesma coisa. Apenas o tamanho do arquivo muda.

Arquivos JavaScript menores são baixados e carregados mais rapidamente, por isso a minificação é uma etapa comum antes de um site entrar no ar.

Como funciona a minificação de JavaScript

Esta ferramenta lê o código um caractere por vez e o reconstrói, removendo tudo de que os leitores precisam, mas que o mecanismo JavaScript não precisa. Ela remove:

  • Comentários, tanto comentários // single-line de uma linha quanto comentários /* multi-line */ de várias linhas, incluindo comentários no estilo JSDoc.
  • Espaços extras, tabulações e linhas em branco que existem apenas para facilitar a leitura do código.

Ela não adiciona nem remove qualquer outra coisa. Nunca exclui um ponto e vírgula, um parêntese ou qualquer outro caractere que já estivesse no código, e nunca insere nova pontuação. Ela também deixa várias coisas inalteradas:

  • Texto dentro de strings ("like this", 'like this') e literais de template (`like this`), mesmo quando esse texto contém espaços ou se parece com um comentário.
  • Literais de expressão regular, como /[a-z]+/g, junto com todas as suas flags: d, g, i, m, s, u, v e y.
  • Todos os pontos e vírgulas, vírgulas e colchetes que o código original já continha.

Às vezes, um espaço entre dois tokens não pode ser removido sem alterar o significado. return a não pode se tornar returna, porque isso seria lido como uma única palavra. O mesmo vale para nomes escritos com letras fora do alfabeto inglês, por isso typeof π mantém seu espaço. Quando a remoção de um espaço uniria dois tokens, a ferramenta mantém um único espaço.

Uma quebra de linha também pode ser importante. Às vezes, o JavaScript insere automaticamente um ponto e vírgula no final de uma linha, uma regra chamada Inserção Automática de Ponto e Vírgula. Se a exclusão de uma quebra de linha pudesse acionar ou impedir essa regra, ou se a quebra viesse depois de uma chave de fechamento }, a ferramenta manteria uma única nova linha nesse local. Por isso, o código minificado nem sempre fica todo em uma linha: algumas quebras de linha alteram o significado do código e precisam ser mantidas.

Como usar este minificador de JavaScript

  1. Cole o código JavaScript na caixa de entrada.
  2. Selecione "Minificar".
  3. Leia o resultado na caixa de saída, junto com o tamanho original, o tamanho minificado e a porcentagem de redução.
  4. Selecione "Copiar" para copiar o código minificado.

A minificação é executada dentro da aba do navegador, portanto o código não é enviado a nenhum lugar para ser processado. A ferramenta também copia o código colado para o endereço da página, o que facilita marcar ou compartilhar um resultado. Assim, qualquer pessoa que consiga ver esse endereço também poderá ver o código.

Exemplo: minificação de uma função

Antes:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Depois:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Os três comentários desaparecem e a indentação é removida. O ponto e vírgula depois de a+b permanece, porque a ferramenta nunca exclui um ponto e vírgula que já estivesse no código. A quebra de linha antes de const também permanece, porque vem depois de uma chave de fechamento }.

Exemplo: minificação de uma classe

Antes:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Depois:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Observe que uma quebra de linha permanece antes de cada método e antes da chave de fechamento } da classe. Cada uma dessas quebras vem depois de uma chave de fechamento } no código original, portanto a regra que protege a Inserção Automática de Ponto e Vírgula as mantém. Os pontos e vírgulas dentro de cada método também permanecem.

Fórmula de redução do tamanho

A ferramenta informa três números abaixo da caixa de saída: o tamanho original, o tamanho minificado e a redução. Todos os tamanhos são contagens de caracteres, não de bytes. A redução é uma porcentagem arredondada para o número inteiro mais próximo:

1reduction = round((1 - minified characters / original characters) x 100)
2

O exemplo da função acima tem 213 caracteres antes da minificação e 103 depois. Portanto, 1 - 103 / 213 = 0,5164, o que corresponde a 51,64%, e a ferramenta exibe 52%. O exemplo da classe passa de 515 caracteres para 304, o que corresponde a 40,97%, exibidos como 41%.

Limitações deste minificador

Esta ferramenta remove apenas comentários e espaços em branco. Diferentemente de ferramentas usadas na etapa de build, como Terser ou UglifyJS, ela não renomeia variáveis, exclui código não utilizado nem combina arquivos. Essas ferramentas geralmente produzem uma saída menor, mas precisam de um processo de build para serem executadas. Esta ferramenta funciona instantaneamente no navegador, sem configuração, o que é adequado para verificações rápidas ou pequenos trechos de código, e não para um pipeline completo de produção.

Perguntas frequentes

O que um minificador de JavaScript remove?

Ele remove comentários e espaços em branco que não são necessários para a execução do código. Não remove pontos e vírgulas, colchetes ou qualquer outro caractere que já fizesse parte do código.

A minificação de JavaScript altera a forma como o código é executado?

Não. O código minificado deve produzir os mesmos resultados que o original. Apenas a formatação muda.

Por que o código minificado às vezes ainda tem quebras de linha?

Uma quebra de linha pode ser exigida pela regra de Inserção Automática de Ponto e Vírgula do JavaScript ou pode vir depois de uma chave de fechamento }. Removê-la poderia alterar o comportamento do código, por isso a ferramenta mantém uma única nova linha nesses pontos em vez de excluí-la.

Minificação é o mesmo que compressão?

Não. A minificação remove caracteres do próprio código-fonte. A compressão, como gzip ou Brotli, codifica o arquivo de outra forma para sua transferência pela rede. Os sites costumam usar as duas técnicas em conjunto.

Meu código é enviado para um servidor?

O próprio minificador é executado inteiramente na aba do navegador, e o código não é enviado para ser minificado. O código colado é armazenado no endereço da página para que um resultado possa ser compartilhado ou marcado, portanto aparece na barra de endereços do navegador e no histórico.

É possível transformar o código minificado de volta no original?

Os espaços em branco podem ser restaurados por um formatador de código, mas os comentários e os nomes originais de variáveis e funções desaparecem, a menos que um mapa de origem separado tenha sido salvo.

Referências

  1. MDN Web Docs. "Minificação." Glossário da MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "Especificação da linguagem ECMAScript", seção 12.10, "Inserção Automática de Ponto e Vírgula." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "Especificação da linguagem ECMAScript", seção 12.7.1, "Nomes de identificadores." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "Especificação da linguagem ECMAScript", seção 22.2.6, "Propriedades do objeto protótipo RegExp" (o conjunto de flags d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object