Aguarde...

8 de novembro de 2020

Como reduzir o tamanho do arquivo do Tailwind CSS usando PurgeCSS?

Como reduzir o tamanho do arquivo do Tailwind CSS usando PurgeCSS?

Tailwind CSS é um framework CSS popular e pioneiro, usado por centenas de milhares de desenvolvedores da Web em todo o mundo. A nova metodologia de trabalho com classes e estilos pode tornar a construção de interfaces de usuário mais fácil e rápida. Neste guia, você aprenderá como reduzir o tamanho final do arquivo CSS do Tailwind usando PurgeCSS e fazer o seu site carregar mais rápido.

Por padrão, o tamanho do arquivo descompactado do Tailwind CSS é 2413,4kB, reduzido é 1967,4kB, reduzido e compactado usando Gzip é 190,2kB e quando compactado com Brotli é 46,2kB. Em comparação, o tamanho do arquivo descompactado do CSS Bootstrap é de apenas 143kB. Então você pode perguntar, por que é tão grande? Posso reduzir o tamanho dele? A resposta é sim, definitivamente!

Por que o tamanho de arquivo padrão do Tailwind CSS é tão grande?

Tailwind CSS é uma coleção de classes utilitárias para definir certos valores de margens, preenchimentos, tamanhos de fonte, pesos de fonte e muito mais usando classes diretamente. Em vez de adicionar preenchimento extra a um botão usando uma classe como .button, você só precisa adicionar a classe .p-3ou p-4e adicionará preenchimento diretamente ao elemento.

A desvantagem é que existem milhares dessas classes de utilitário no Tailwind CSS e a maioria delas nem mesmo é usada no projeto e o tamanho padrão do Tailwind CSS é bastante grande em comparação com outros frameworks CSS. Mas isso não significa que você não deva usar Tailwind CSS para seus projetos, porque existe uma solução muito fácil para tudo isso.

Como reduzir o tamanho do arquivo CSS do Tailwind?

Tudo o que você precisa fazer para reduzir o tamanho do arquivo CSS do Tailwind é remover todas as classes de utilitário não utilizadas do arquivo CSS principal. Claro, você não deve fazer isso manualmente, porque existe uma ferramenta incrível chamada PurgeCSS que examina seus modelos HTML e decide quais classes CSS são usadas e não usadas e, com base nisso, remove as não usadas do Tailwind CSS.

Presumo que você já tenha um projeto de CSS do Tailwind funcionando configurado e que esteja usando o tailwind.config.jsarquivo, não apenas o CDN. Se não, verifique nosso último tutorial de CSS do Tailwind, onde você pode aprender como usar o CSS do Tailwind da maneira recomendada.

Configure PurgeCSS em seu arquivo de configuração do Tailwind para remover CSS não utilizado

Tudo que você precisa fazer é fornecer os caminhos que PurgeCSS deve procurar em seu tailwind.config.jsarquivo, adicionando as seguintes propriedades ao purgeobjeto:

    
// tailwind.config.js
purge: {
    enabled: true,
    content: [
        './**/*.html'
    ]
}
    

Se você executar o comando build para processar o arquivo de configuração, verá que o arquivo CSS compilado do Tailwind CSS será muito menor do que o tamanho padrão, porque as classes não utilizadas foram removidas.

Postado em Blog
Escreva um comentário