tailwindcss से भी तेज़ और छोटा CSS आउटपुट
(github.com/dev-five-git)Devup UI और अन्य लाइब्रेरीज़ पर किए गए benchmark के नतीजे साझा कर रहा हूँ!
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 एक ही codebase पर किए गए हैं (कुछ मामलों में कोड अन्य लाइब्रेरीज़ के लिए अधिक अनुकूल है, और सभी test code open source के रूप में उपलब्ध हैं!)। साथ ही, हर स्थिति में speed में नंबर 1 tailwind की तरह CSS generate करने के तरीके (single css) के आधार पर यह सबसे छोटा build output दिखाता है.
कृपया बहुत रुचि और समर्थन दें!
2 टिप्पणियां
फ़्रंटएंड कॉन्फ़्रेंस में सुनी गई प्रस्तुति के आधार पर मुझे लगा कि इसका दृष्टिकोण Tailwind और उसके अंदरूनी काम करने के तरीके से मिलता-जुलता है, और लिखने के तरीके में अंतर के अलावा मुझे ऐसा कोई बड़ा फ़ायदा नहीं मिला जिसे खास तौर पर उल्लेखनीय कहा जा सके.
शायद Tailwind में CSS Normalize शामिल होता है; क्या devup-ui में भी यही शर्त लागू होती है, यह जानने की उत्सुकता है.
यह
@devup-ui/reset-cssके माध्यम से किया जा सकता है.अगर सबसे बड़े फ़ायदों की बात करें, तो मौजूदा CSS-in-JS solutions को आसानी से migrate किया जा सकता है, और tailwind की तुलना में हल्का CSS output तथा CSS Treeshake भी बड़े फ़ायदे लगते हैं.
इसके बाद, tailwind से अलग, हमने यह update भी किया है कि हर file के लिए CSS generate हो, ताकि chunk split करने की सुविधा मिल सके. आगे और updates के ज़रिए हम इसे और अलग बनाएंगे.
धन्यवाद.