Un resultado de CSS más rápido y más pequeño que tailwindcss
(github.com/dev-five-git)¡Comparto los resultados de una prueba de benchmark realizada con Devup UI y otras 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
El benchmark se realizó con el mismo código para todos (en algunos casos, incluso con código más favorable para otras bibliotecas; además, todo el código de prueba está abierto como open source). En todas las situaciones, al generar CSS con el mismo enfoque que tailwind, que ocupa el primer lugar en velocidad (single css), se muestra el resultado de build más pequeño.
¡Agradecemos mucho su interés!
2 comentarios
Por la presentación que escuché en una conferencia de frontend, sentí que el enfoque de Tailwind y su funcionamiento interno eran similares, y fuera de algunas diferencias en la forma de escribirlo, creo que no encontré muchos elementos que me hicieran sentir una gran ventaja.
Supongo que Tailwind incluye CSS Normalize, así que me da curiosidad saber si devup-ui también cumple con esa misma condición.
Se puede hacer mediante
@devup-ui/reset-css.La mayor ventaja sería que permite migrar fácilmente las soluciones existentes de CSS-in-JS, además de que genera un resultado de CSS más liviano que Tailwind, y también el CSS Treeshake parece ser una gran ventaja.
Después, a diferencia de Tailwind, también actualizamos la función para que se genere CSS por cada archivo y así poder dividir los chunks. Seguiremos diferenciándonos con más actualizaciones.
Gracias.