5

Gostaria de saber se existe algum transpilador que analisa as classes e ids usados numa pagina HTML e retira todas as classes e ids não utilizados no CSS e JavaScript.

Isso seria interessante para diminuir ainda mais os arquivos melhorando o desempenho das páginas.

3
  • 2
    Tipo o Tree Shaking?
    – Woss
    13/12/2018 às 11:04
  • 1
    Vc quer algo automático para grandes volumes, ou pode ser uma resposta com uma solução mais simples que te ajude a fazer isso de forma "manual" e em pequena escala?
    – hugocsl
    13/12/2018 às 11:07
  • Eu gostaria de saber um pouco sobre os dois 13/12/2018 às 11:09

1 Resposta 1

7

Como vc falou que uma solução em "pequena escala" também te atende, vou te dar uma dica usando a Aba Coverage do DevTools do Chrome. Link do Google https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Na Aba Coverage vc consegue avaliar o que do código realmente está em uso, vale tanto pra CSS quanto para JS. Deixei os comentários na imagem.

inserir a descrição da imagem aqui

O detalhe é que por exemplo o CSS responsivo só é marcado como Verde quando ele realmente é ativado. Esse é o único inconveniente dessa técnica, pq vc tem que navegar pela página para ver o que é usado ou não. Repare que como falei não existe <h1> no HTML, então a regra CSS do <h1> nunca vai ficar Verde

inserir a descrição da imagem aqui




Veja essa outra imagem com um documento maior!

inserir a descrição da imagem aqui




Como falei não é a solução perfeita para grandes projetos, mas se for usado desde o início e fazendo as auditorias direitinho em curtos períodos de tempo e possível controlar bem o que se está de fato usando e o que é "lixo"...




EDIT Como abrir a ABA COVERAGE

inserir a descrição da imagem aqui




Extensão para o Chrome

No Chrome Web Store vc também encontra algumas extensões que ajudam nisso https://chrome.google.com/webstore/detail/code-coverage-calculator/ncdifkcipeniikkbckejmnbbcofdheig


Automatizando com PurgeCSS

Vc pode usar ferramentas como o PurgeCSS https://www.purgecss.com/ para eliminar código CSS que não está utilizando, vc precisa ter Node instalado. Basicamente ele vai ler seu HTML comparar com o CSS e soltar um .css purificado só com o de fato vc está usando. O legal é que vc pode configura-lo para rodar com Ruby, ou em compiladores como Gulp e Grunt ou no Webpack. Ai sempre que compilar ele já faz o purge. Aqui tem o projeto no Git https://github.com/FullHuman/purgecss

3
  • Qual versão do Crome isso está disponível?
    – Marconi
    13/12/2018 às 19:53
  • @Marconi conforme o link a partir da versão 59 tem que dar um F5 depois que abrir a aba developers.google.com/web/updates/2017/04/… Editei a resposta mostrando como abre essa Aba no DevTools
    – hugocsl
    13/12/2018 às 20:06
  • No que tange a ativação da propriedade @media, pode colocar a tela no modo responsivo para vários dispositivos.
    – MagicHat
    7/08/2019 às 16:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .