ผลลัพธ์ CSS ที่เร็วกว่าและมีขนาดเล็กกว่า tailwindcss
(github.com/dev-five-git)ขอแชร์ผลการทำเบนช์มาร์กกับ Devup UI และไลบรารีอื่น ๆ ครับ!
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
มีการทำเบนช์มาร์กด้วยโค้ดเดียวกันทั้งหมด (บางส่วนเป็นโค้ดที่เอื้อประโยชน์ต่อไลบรารีอื่นมากกว่า และโค้ดทดสอบทั้งหมดเปิดเป็นโอเพนซอร์สแล้ว!) และในทุกสถานการณ์ เมื่ออ้างอิงตามการสร้าง CSS แบบเดียวกับ tailwind ที่ได้อันดับ 1 ด้านความเร็ว (single css) ก็แสดงผลลัพธ์บิลด์ที่มีขนาดเล็กที่สุด
ฝากติดตามกันเยอะ ๆ ด้วยครับ!
2 ความคิดเห็น
จากงานนำเสนอที่ได้ฟังในคอนเฟอเรนซ์ฝั่งฟรอนต์เอนด์ ผมรู้สึกว่าแนวทางของมันคล้ายกับ Tailwind และวิธีการทำงานภายในก็ใกล้เคียงกัน จึงดูเหมือนว่านอกจากความต่างด้านรูปแบบการเขียนแล้ว ก็ยังไม่ค่อยเจอจุดเด่นที่ทำให้รู้สึกว่ามีข้อได้เปรียบมากนัก
Tailwind น่าจะรวม CSS Normalize มาให้ด้วย เลยสงสัยว่า devup-ui อยู่ในเงื่อนไขเดียวกันหรือเปล่าครับ
สามารถดำเนินการได้ผ่าน
@devup-ui/reset-cssข้อดีที่ใหญ่ที่สุดน่าจะเป็นการย้ายจากโซลูชัน CSS-in-JS เดิมได้อย่างง่ายดาย และยังได้ผลลัพธ์ CSS ที่เบากว่า tailwind รวมถึง CSS Treeshake ก็น่าจะเป็นจุดเด่นสำคัญเช่นกัน
หลังจากนั้น เราได้อัปเดตฟังก์ชันที่ต่างจาก tailwind โดยให้สร้าง CSS แยกในแต่ละไฟล์เพื่อให้สามารถ split chunk ได้ด้วย และจะสร้างความแตกต่างผ่านการอัปเดตเพิ่มเติมอีกมากขึ้น
ขอบคุณครับ