O formato é a parte do fluxo de trabalho com código que ninguém nota até ficar faltando: um bloco de HTML se lê como uma palavra única e longa, e esse mesmo bloco vira uma árvore no instante em que a indentação fica certa. Um formatador não muda o significado do seu código marcado, muda o quanto custa olhar para ele, e essa diferença é onde vai boa parte do tempo de depuração. O Formatador HTML roda por completo no seu navegador: você cola o código marcado, escolhe um modo e o resultado aparece no painel ao lado. Nada é enviado e nada sai da aba, o que importa quando a página que você está limpando contém chaves de API, nomes de host internos ou dados de clientes que você não colaria em um serviço de terceiros.
A ferramenta trabalha em duas direções e responde a perguntas diferentes. O modo formatar pergunta: como essa estrutura se vê quando os espaços em branco são honestos? O modo minificar pergunta: o quão pequeno esse arquivo pode ficar sem uma única mudança de comportamento? O resto deste guia explica como cada passagem funciona, o que acontece com uma página real de 458 caracteres em cada modo, quais partes do documento o minificador se recusa a tocar e quais apaga, como a configuração de indentação e a lista de elementos em linha dão forma à saída formatada, e onde esta ferramenta se situa em relação às outras ferramentas de formato da coleção.
Como um formatador HTML funciona: dois modos, uma colagem
Os dois modos leem a mesma string de entrada e escrevem um resultado em texto plano no painel de saída; a diferença é a transformação aplicada. O modo formatar entrega o código marcado ao mecanismo HTML do js-beautify com um conjunto fixo de opções: indentação de dois ou quatro espaços, sem quebra de linha, sem nova linha final, sem indentação dentro dos elementos em linha, e uma lista de elementos cujo conteúdo nunca é partido entre linhas. O modo minificar roda um pipeline feito sob medida: primeiro ele extrai todos os blocos script, textarea e pre do documento e os deixa de lado, depois remove os comentários HTML, compacta cada sequência de espaços em branco para um único espaço, remove os espaços ao redor das junções de tags e por fim devolve os blocos protegidos byte a byte.
Essa ordem é todo o projeto. Compactar espaços em branco é seguro para o código marcado e até para o CSS dentro de uma tag style, porque em ambas as línguas uma sequência de espaços e quebras equivale a um único espaço. Não é seguro dentro de uma tag pre, onde os espaços em branco são o conteúdo, nem dentro de um script, onde o minificador colaria declarações sem reclamar. Extrair e depois restaurar é o que permite passadas agressivas sobre o resto do documento enquanto essas três regiões saem exatamente como entraram, quebras de linha incluídas.
O caso padrão: uma página de 458 caracteres vira uma linha de 281
Pegue uma página escrita à mão: um doctype, um head com charset, um título, um pequeno bloco style e um body com um cartão contendo um cabeçalho, um parágrafo e um botão. Escrita como a gente realmente escreve, com a indentação que você digitaria e um comentário de rascunho esquecido, são 458 caracteres em 28 linhas. Passe pelo modo formatar e a página volta com 390 caracteres em 27 linhas: o título e o cabeçalho com excesso de indentação se recolocam em sua própria linha, a estrutura se reencaixa num ritmo constante de dois espaços e o comentário de rascunho fica no lugar. Se o padrão do seu projeto são quatro espaços, a mesma passada devolve um documento com o mesmo número de linhas e indentação mais larga.
Se em vez disso você passa a mesma página de 458 caracteres pelo modo minificar, o resultado são 281 caracteres numa única linha, uma redução de 38,6 por cento. O comentário de rascunho sumiu, a indentação sumiu, os espaços entre tags sumiram, e o que resta é o mesmo documento: mesmos elementos, mesmos atributos, mesmo texto, mesmo CSS. Se você quer os números de antes e depois lado a lado sem fazer a conta à mão, o Contador e Analisador de Caracteres lê o comprimento de qualquer um dos painéis e transforma a economia em um número que você pode citar em uma solicitação de alteração.
O que o minificado protege e o que remove
Três tipos de bloco são retirados do documento antes de qualquer compactação: script, textarea e pre. Uma página que contém um script com duas atribuições, cada uma na sua própria linha, volta do minificado com as duas quebras de linha intactas, porque o bloco inteiro, da tag de abertura à tag de fechamento, viaja para a saída sem ser tocado. Um bloco pre que depende de espaços duplos e quebras de linha para aparecer como uma listagem de código conserva todos eles. A proteção é byte a byte, não linha a linha, então ela também cobre espaços que parecem acidentais mas carregam peso, como os que impedem um elemento em linha de se fundir com o vizinho.
A proteção é uma fronteira, não um destino. O script dentro de um bloco protegido fica a salvo da passada HTML, e essa é toda a promessa que a passada HTML pode fazer: o minificação real de JavaScript é uma questão de sintaxe, onde declarações mortas, parênteses redundantes e renames seguros de identificadores podem ser apagados, e isso é trabalho do Formatador e Minificador JavaScript, com um mecanismo que analisa o código em vez de fazer correspondência por padrão. A tag style fica do outro lado da fronteira: o CSS dela não é protegido, recebe o tratamento de espaços em branco, as regras permanecem, os espaços diminuem e o resultado continua sendo CSS válido. Quando a folha de estilos merece uma passada mais profunda, o Minificador CSS assume, com um mecanismo que sabe onde um espaço entre um seletor e uma declaração carrega peso e onde é ruído puro.
Tudo o que fica fora desses blocos recebe o tratamento completo, e há dois detalhes que valem conhecer. Os comentários HTML são eliminados por completo, e a passada executa a remoção de comentários duas vezes, uma antes da compactação de espaços em branco e outra depois, porque a compactação pode juntar dois comentários pela metade num único que só existe na forma compactada. E os espaços ao redor das junções de tags, as lacunas entre um colchete de fechamento e o próximo colchete de abertura, desaparecem, de modo que a saída é uma linha ininterrupta de colchetes. Uma característica esperável: onde um bloco protegido ficava no fluxo, pode restar um único espaço no lugar dele, porque a compactação aconteceu em volta de um marcador, não em volta da tag real. Nada quebra; o arquivo continua válido, ele só não está tão apertado quanto o resto da linha.
Modo formatar: indentação, quebra e a lista de elementos em linha
O formatador expõe uma única configuração que a maioria das pessoas muda, e é a largura da indentação: dois espaços por padrão, quatro como alternativa. Na amostra de 197 caracteres e cinco linhas com um comentário e um script pequeno, a passada de dois espaços devolve 244 caracteres em 18 linhas, e a passada de quatro espaços devolve as mesmas 18 linhas com 278 caracteres. Mesma estrutura, mesmo número de linhas, mais folga horizontal; a escolha é uma convenção de equipe, não uma questão de correção. A quebra de linha fica desativada de propósito, para que uma lista longa de atributos continue numa linha em vez de partir numa coluna arbitrária, e a saída termina exatamente onde termina a última tag, sem nova linha final adicionada.
A configuração mais sutil é a lista de elementos tratados como em linha: a, span, td, th, small, pre e code. Para essas tags o mecanismo se recusa a partir a linha entre o colchete de abertura e o de fechamento, então um link que envolve uma palavra no meio de uma frase continua numa linha, e uma célula de tabela não espalha seu conteúdo pela página inteira. Essa lista é a razão pela qual a saída formatada de uma página com muito texto se lê como se você tivesse indentado à mão: elementos de bloco empilham, elementos em linha fluem, e nada no meio de uma frase recebe uma quebra de linha a mais.
Formatos vizinhos: JSON, XML e onde cada formatador se situa
O HTML é o mais tolerante das linguagens de marcação, que é exatamente a razão pela qual ele mais recebe abuso de espaços em branco. Um payload JSON, em contrapartida, quebra no instante em que uma vírgula a mais ou um espaço final se insinua, então ele tem sua própria ferramenta com um validador que te diz a linha e o motivo: o Formatador JSON lê o mesmo tipo de bloco colado e devolve formatado ou rejeitado, o par certo quando o HTML que você limpa embute um objeto de configuração numa tag script. O XML é o primo mais rigoroso, onde um colchete desparceado é um erro duro e não um palpite do navegador, e o Formatador XML cuida dessa família de documentos com o mesmo padrão de formato mais minificação.
O sentido da divisão é que cada formato tenha um mecanismo que fale a língua dele: um reorganização de HTML para o documento, um mecanismo que entende CSS para as folhas de estilo e um parser de JS para os scripts. Rodar as quatro ferramentas sobre a mesma página é a mesma divisão de trabalho que um sistema de build faz com sua cadeia de ferramentas, só que sem o build: você formata o documento, minifica as cargas e publica o resultado. O formatador HTML é a peça que mantém a estrutura legível no meio, e é exatamente a parte que um minificador genérico estraga primeiro, porque ele otimiza o tamanho do arquivo enquanto você ainda está editando.
Ler o resultado antes de publicar
O painel de saída é toda a superfície de revisão, então vale a pena lê-lo como um revisor leria. No modo formatar, olhe primeiro a estrutura: os blocos se aninham como você espera, a lista de elementos em linha mantém o texto legível, e existe algum elemento que o ritmo de dois espaços tornou mais difícil de acompanhar? O comentário que o minificado apaga é o único ponto em que os dois modos discordam sobre o que o seu arquivo contém, e se aquele comentário carregava peso para a próxima pessoa, a versão a manter é a do modo formatar.
No modo minificar a revisão é mais curta e mais mecânica. O arquivo deveria ser uma linha, as tags deveriam ser contíguas e as regiões protegidas deveriam sobreviver: abra a saída, localize o script e confirme que as quebras de linha ainda estão lá. Se você precisa da página como texto puro em vez de código marcado, o Conversor HTML para Texto remove as tags e devolve a vista de leitura, o movimento certo quando o entregável é uma colagem num documento e não um deploy. E quando a configuração que move a página mora num arquivo YAML ao lado do código marcado, o Formatador YAML dá a esse arquivo o mesmo tratamento. Colar, escolher o modo, ler a saída, copiar: o ciclo inteiro fica na aba que tem o arquivo, do começo ao fim.