tailwindcss’ten daha hızlı ve daha küçük CSS çıktısı
(github.com/dev-five-git)Devup UI ve diğer kütüphaneler üzerinde yaptığımız benchmark sonuçlarını paylaşıyoruz!
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
Benchmark’in tamamı aynı kodla gerçekleştirildi (bazı durumlarda diğer kütüphaneler için daha avantajlı kod kullanıldı; tüm test kodları açık kaynak olarak yayımlandı!) ve tüm senaryolarda, hızda 1. olan tailwind ile aynı şekilde CSS üretildiğinde (single css), en küçük build çıktısını gösteriyor.
İlginizi bekliyoruz!
2 yorum
Frontend konferansında dinlediğim sunuma göre, Tailwind ile iç çalışma mantığına yaklaşımının benzer olduğunu hissetmiştim ve yazım biçimindeki fark dışında çok büyük bir avantaj hissettirecek bir unsur bulamamış gibiydim.
Tailwind muhtemelen CSS Normalize içeriyordur; devup-ui'nin de aynı koşulu sağlayıp sağlamadığını merak ediyorum.
@devup-ui/reset-cssaracılığıyla yapılabilir.En büyük avantajı, mevcut CSS-in-JS çözümlerinin kolayca migrate edilebilmesi; ayrıca Tailwind'den daha hafif CSS çıktısı ve CSS treeshake de büyük avantajlar gibi görünüyor.
Daha sonra, Tailwind'den farklı olarak her dosya için CSS üretilmesini sağlayarak chunk split etme özelliğini de güncelledik; daha fazla güncellemeyle farklılaşacağız.
Teşekkürler.