Minhas ferramentas

Minificar JS e CSS

Cole o código e a versão minificada aparece enquanto você digita — com os caracteres economizados.

Como usar

  1. Cole JavaScript ou CSS na caixa — a versão minificada aparece enquanto você digita, sem botão para clicar.
  2. Deixe a sintaxe em Automático, ou escolha JavaScript / CSS se a detecção errar; o resultado é re-renderizado imediatamente.
  3. O cabeçalho mostra os caracteres economizados antes → depois. Copie a saída ou baixe-a como arquivo .js / .css.

Exemplo

Entrada

// Total do carrinho com o selo de frete grátis
const TAX = 0.08;

function total(items, coupon) {
  let sum = 0;
  for (const item of items) {
    sum += item.price * item.qty;
  }
  if (coupon) {
    sum -= coupon;
  }
  return { amount: sum * (1 + TAX), freeShipping: sum > 50 };
}

Minificado

const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}

O comentário sumiu e os espaços foram reduzidos, mas cada identificador mantém o nome e cada literal mantém a grafia exata. A leitura mostra 279 → 177 caracteres (−37%).

Regras, limites e problemas conhecidos

  • Apenas espaços e comentários. Nada é renomeado, nenhuma instrução é dobrada e nenhum código é removido — então a saída minificada se comporta como o original, mas é maior do que a produzida pelo Terser.
  • Comentários que começam com /*! ou //!, e comentários que mencionam @license ou @preserve, são mantidos; todos os outros são removidos.
  • As quebras de linha permanecem onde removê-las mudaria o programa: após return / throw / break / continue / yield / async, e entre duas instruções em que o JavaScript inseriria um ponto e vírgula automaticamente (a\nb, x={}\nfoo()). A maior parte do código sai em uma linha.
  • JavaScript é tokenizado, não analisado: "/*" dentro de uma string, de uma expressão regular ou de um template literal nunca é tocado. Divisão e expressões regulares são distinguidas pelo token anterior; uma regex que atravessa uma linha é tratada como divisão.
  • CSS só perde espaços que não podem significar nada: ao redor de { } ; , > ~ ! e após ":", e o último ";" antes de um "}". Espaços de descendência permanecem (.a .b não é .a.b), o espaço antes de ":" permanece (a :hover não é a:hover), e calc(100% - 10px) mantém os espaços porque fazem parte da sintaxe.
  • Sem renomeação (mangle), sem remoção de código morto, sem drop_console: isso muda o comportamento, o que um botão de "minificar" não deveria fazer em silêncio.
  • Não suportado: HTML/SVG (os espaços ali dependem de <pre>, <textarea> e elementos inline), reescritas de tipos do TypeScript, entrada JSX/TSX, source maps e mesclagem de vários arquivos. JSX é detectado e sinalizado com um aviso.
  • Uma string, template, comentário ou url( não fechado no fim da entrada é aviso, não erro: o restante do código ainda é minificado. Parênteses desbalanceados também são aviso — isto não é um validador.
  • As leituras contam pontos de código Unicode, não bytes nem unidades UTF-16; as porcentagens são arredondadas para número inteiro e mostradas como +n% quando a saída cresce. Tudo roda no seu navegador: nada é enviado, armazenado ou colocado na URL.
  • Acima de 200.000 caracteres o resultado é atualizado cerca de 0,6 s depois de você parar de digitar; o texto nunca é truncado. A saída usa LF e não termina com quebra de linha.

O que as pessoas costumam precisar depois que o código está pequeno.

Formatador de código (embelezador)

Caixa de ferramentas JSON

Formatador XML