Resultado de CSS mais rápido e menor que o tailwindcss
(github.com/dev-five-git)Compartilho os resultados de um benchmark feito com o Devup UI e outras bibliotecas!
Library Version Build Time Build Size
tailwindcss 4.1.13 20.22s 57,415,796 bytes
styleX 0.15.4 38.97s 76,257,820 bytes
vanilla-extract 1.17.4 20.09s 59,366,237 bytes
kuma-ui 1.5.9 21.61s 67,422,085 bytes
panda-css 1.3.1 22.01s 62,431,065 bytes
chakra-ui 3.27.0 29.99s 210,122,493 bytes
mui 7.3.2 22.21s 94,231,958 bytes
devup-ui(per-file css) 1.0.18 18.23s 57,440,953 bytes
devup-ui(single css) 1.0.18 18.35s 57,409,008 bytes
O benchmark foi realizado com o mesmo código para todos (em alguns casos, o código até favorece mais outras bibliotecas, e todo o código de teste está aberto como open source!), e em todos os cenários ele mostra o menor resultado de build com base no caso em que o CSS foi gerado da mesma forma que o tailwind, que ficou em 1º em velocidade (single css).
Agradeço o interesse de todos!
2 comentários
Pela apresentação que ouvi na conferência de front-end, senti que a abordagem é parecida com a do Tailwind e com seu funcionamento interno, e, tirando a diferença na forma de escrever, acho que não encontrei muitos pontos que trouxessem uma vantagem realmente significativa.
O Tailwind deve incluir CSS Normalize; fiquei curioso para saber se o devup-ui também atende à mesma condição.
Isso pode ser feito com
@devup-ui/reset-css.A maior vantagem, na minha opinião, é que dá para migrar facilmente soluções existentes de CSS-in-JS, além de gerar um CSS mais leve que o Tailwind; outro grande benefício também parece ser o CSS Treeshake.
Depois, diferentemente do Tailwind, também atualizamos a funcionalidade para gerar CSS por arquivo, permitindo dividir os chunks; vamos nos diferenciar com ainda mais atualizações.
Obrigado.