Minificador de JavaScript e CSS

O que faz

A minificação remove tudo de que o navegador não precisa para executar o seu código: espaços em branco, quebras de linha, comentários e nomes longos. Arquivos menores baixam mais rápido, o que melhora o tempo de carregamento da página e as Core Web Vitals, principalmente em redes móveis.

Esta ferramenta minifica JavaScript com o Terser, o minificador usado pelo webpack, Rollup e Vite, e CSS com o CSSO, que também reestrutura as folhas de estilo: encurta cores (#ffffff para #fff), remove unidades e valores redundantes (0px 0px para 0) e mescla regras que compartilham seletores ou declarações.

Como usar

1. Cole o código no campo Entrada, solte um arquivo .js ou .css sobre ele ou clique em Exemplo.
2. Escolha JavaScript ou CSS.
3. Em JavaScript, Encurtar nomes de variáveis renomeia variáveis locais e parâmetros para letras únicas. Nomes exportados e globais nunca são alterados.
4. Em CSS, Mesclar regras duplicadas combina regras com as mesmas declarações.
5. Copie o resultado ou baixe-o. Os contadores de tamanho embaixo de cada campo mostram quanto você economizou.

Se o JavaScript tiver um erro de sintaxe, a mensagem de erro mostra a linha e a coluna para você ir direto até ele.

Exemplo

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

vira

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Quando usar

Use-a para algo rápido e pontual: um trecho para uma CDN, um script inline em um e-mail HTML, um bookmarklet ou para ver o quanto uma biblioteca pode encolher. Em um projeto de verdade, o seu bundler deve minificar a cada build para que o código-fonte continue legível.