Embelezador e Minificador de HTML / CSS / JS
Embeleza ou minifica HTML, CSS e JavaScript localmente no teu navegador.
A carregar Embelezador e Minificador de HTML / CSS / JS… Se nada acontecer, ativa o JavaScript.
O código front-end chega em dois estados: o código-fonte com uma indentação cuidada que as pessoas escrevem, e as linhas únicas minificadas que as ferramentas de compilação produzem para o navegador. Mover-se entre esses estados é uma tarefa rotineira, e esta ferramenta trata de ambas as direções para HTML, CSS e JavaScript. Embelezar reorganiza o código comprimido ou desarrumado num fonte limpo e com indentação coerente para que o possas ler, depurar ou aprender com ele. Minificar volta a remover os espaços em branco para reduzir a carga útil quando queres uma forma rápida e sem dependências de compactar um excerto.
Perguntas frequentes
O meu código é enviado para um servidor?
Que linguagens consegue tratar?
Qual é a diferença entre Embelezar e Minificar?
O minificador é tão bom como uma ferramenta de compilação de produção?
Minificar o meu JavaScript poderá alguma vez parti-lo?
Embelezar altera o comportamento da minha página?
Consegue formatar um ficheiro inteiro de uma só vez?
Funciona sem ligação à internet?
Sobre Embelezador e Minificador de HTML / CSS / JS
Escolhe a linguagem que corresponde à tua entrada (HTML, CSS ou JavaScript), cola o código e clica em Embelezar para o formatar com indentação de dois espaços e quebras de linha sensatas, ou em Minificar para colapsar os espaços em branco numa forma compacta. Para HTML, o minificador também remove os espaços em branco entre etiquetas, que é a parte segura e de alto impacto da compressão de HTML. O resultado formatado ou compactado aparece numa caixa só de leitura com um botão de copiar para que o possas colar diretamente de volta no teu projeto.
Todo o processo de formatação corre no teu navegador usando uma biblioteca de embelezamento incluída e um pequeno colapsador de espaços em branco integrado, sem chamadas a qualquer servidor. O teu código, incluindo quaisquer dados em linha, comentários ou lógica proprietária que contenha, nunca sai da tua máquina e nunca é registado. Isso torna a ferramenta segura para fonte inédito ou confidencial, e continua a funcionar sem ligação à internet assim que a página tiver carregado.
A arte de tornar o código mais pequeno
A minificação tornou-se essencial à medida que as páginas web evoluíram de simples documentos para aplicações completas. Cada byte de HTML, CSS e JavaScript tem de viajar pela rede e ser analisado pelo navegador, por isso aparar espaços em branco e encurtar nomes acelera diretamente o carregamento das páginas. Em sites grandes, a poupança da minificação, combinada com a compressão gzip ou Brotli, pode cortar as cargas úteis dos scripts em muito mais de metade.
Embelezar é a imagem espelhada e é igualmente valioso. Quando abres as ferramentas de programação num site ao vivo, estás quase sempre a olhar para código minificado, uma parede ilegível de variáveis de uma só letra e quebras de linha em falta. Um embelezador reverte o dano cosmético, restaurando a indentação e a estrutura para que possas realmente seguir a lógica, e é por isso que a impressão legível está integrada no depurador de todos os navegadores.
No entanto, há um limite importante para aquilo que um formatador simples consegue recuperar. Os minificadores de produção renomeiam variáveis e funções para nomes curtos e sem significado para poupar espaço, e esse renomear é irreversível. Embelezar pode restaurar o esquema e tornar o código legível de novo, mas não consegue trazer de volta os nomes descritivos originais nem quaisquer comentários que tenham sido removidos. Essa assimetria é a razão pela qual as equipas guardam o seu fonte original e os seus source maps em vez de confiarem em desminificar os pacotes que publicaram.