A Saída Minificada
O formatador em modo minificação na entrada acima produz:
.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #e5e7eb}.nav-link{color:#374151;text-decoration:none;font-weight:500;transition:color .15s ease}.nav-link:hover{color:#3b82f6}.card{background:#fff;border-radius:.75rem;border:1px solid #e5e7eb;padding:1.5rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}O que a Minificação Remove
Comentários, espaços em branco, caracteres redundantes, abreviação de cor (#ffffff vira #fff), zeros à esquerda (0.75rem vira .75rem).
Minificação vs Compressão
| Estado do arquivo | Tamanho |
|---|---|
| CSS original | 100 KB |
| Após minificação | ~72 KB |
| Após gzip (sem minificação) | ~22 KB |
| Após gzip + minificação | ~20 KB |
Integração com Ferramentas de Build
Vite e Rollup usam esbuild para minificação CSS em builds de produção. webpack requer css-minimizer-webpack-plugin. PostCSS com cssnano dá o maior controle.
Quando Usar um Minificador Online
Use quando precisar verificar quão agressivamente um arquivo será minificado antes de configurar o build, ou quando estiver trabalhando com um trecho CSS que não pertence a um projeto com pipeline de build.