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. O código continua fazendo exatamente a mesma coisa depois da minificação. Só o tamanho do arquivo muda.

Arquivos JavaScript menores são baixados e carregados mais rápido, por isso minificar é uma etapa comum antes de um site ir ao ar.

Como funciona a minificação de JavaScript

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

  • Comentários, tanto os comentários // single-line quanto os comentários /* multi-line */, 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 acrescenta nem remove mais nada. Nunca apaga um ponto e vírgula, um parêntese ou qualquer outro caractere que já estivesse no código, e nunca insere pontuação nova. Também deixa várias coisas intactas:

  • O texto dentro de strings ("like this", 'like this') e de template literals (`like this`), mesmo que contenha espaços ou pareça um comentário.
  • Literais de expressão regular, como /[a-z]+/g.
  • Todo ponto e vírgula, vírgula e colchete que o código original já tinha.

Às vezes, um espaço entre dois tokens não pode ser removido sem alterar o significado deles. return a não pode virar returna, porque seria lido como uma única palavra. Quando remover um espaço fundiria dois tokens, a ferramenta mantém um único espaço.

Uma quebra de linha também pode importar. O JavaScript às vezes insere um ponto e vírgula automaticamente no fim de uma linha, uma regra chamada de inserção automática de ponto e vírgula. Se apagar uma quebra de linha puder acionar ou bloquear essa regra, ou se a quebra de linha vier depois de uma chave de fechamento }, a ferramenta mantém uma única quebra de linha ali. Por isso o código minificado nem sempre fica comprimido em uma só linha: algumas quebras de linha mudam o significado do código e precisam permanecer.

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.

O processamento acontece na aba do navegador. O código nunca é enviado a um servidor.

Exemplo: minificando 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 dois comentários desaparecem e a indentação some. O ponto e vírgula depois de a+b permanece, porque a ferramenta nunca apaga um ponto e vírgula que já existia. A quebra de linha antes de const também permanece, porque vem depois de um } de fechamento.

Exemplo: minificando 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 do } de fechamento da classe. Todas essas quebras vêm depois de um } de fechamento no código original, por isso 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.

Limites deste minificador

Esta ferramenta apenas remove comentários e espaços em branco. Ao contrário de ferramentas de etapa de build, como Terser ou UglifyJS, ela não renomeia variáveis, não apaga código não utilizado e não combina arquivos. A minificação completa pode incluir a remoção de código não utilizado e o encurtamento de nomes de variáveis e funções. Essas ferramentas costumam gerar uma saída menor, mas precisam de um processo de build para funcionar. Esta ferramenta funciona instantaneamente no navegador, sem configuração, o que serve para verificações rápidas ou trechos pequenos, 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 nem qualquer outro caractere que já fizesse parte do código.

Minificar JavaScript muda a forma como ele é executado?

Não. O código minificado deve produzir os mesmos resultados que o original. Só 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 mudar o que o código faz, por isso a ferramenta mantém uma única quebra de linha nesses pontos em vez de apagá-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 a transferência pela rede. Os sites costumam usar as duas juntas.

Meu código é enviado a um servidor?

Não. O minificador roda inteiramente na aba do navegador. O código nunca é enviado a lugar nenhum.

O código minificado pode ser transformado 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 se perdem, a menos que um source map separado tenha sido salvo.

Referências

  1. Mozilla Developer Network. Lexical grammar: Automatic semicolon insertion. Gramática léxica do JavaScript — os pontos e vírgulas são inseridos onde um terminador de linha ou } separa tokens que a gramática não permite juntos.
  2. Mozilla Developer Network. Minification. Verbete do glossário sobre minificação — a minificação pode remover comentários, espaços em branco e código não utilizado, e encurtar nomes de variáveis e funções.
  3. Google. Optimizing encoding and transfer size of text-based assets. web.dev: codificação e transferência — a minificação não é estritamente uma compressão; gzip e Brotli são algoritmos de compressão comuns para texto como JavaScript.