Hasil CSS yang lebih cepat dan lebih kecil daripada tailwindcss

Kami membagikan hasil benchmark yang dilakukan terhadap Devup UI dan beberapa library lain!

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 dijalankan menggunakan kode yang sama untuk semuanya (sebagian bahkan merupakan kode yang lebih menguntungkan bagi library lain, dan seluruh kode pengujian dibuka sebagai open source!), dan di semua situasi, berdasarkan standar pembuatan CSS dengan metode yang sama seperti tailwind yang berada di peringkat 1 dalam kecepatan (single css), hasil build yang ditampilkan adalah yang paling kecil.

Mohon banyak perhatiannya!

[tjddnjsjo]

Dari presentasi yang saya dengar di konferensi frontend, saya merasa pendekatannya mirip dengan Tailwind dalam hal cara kerja internalnya, dan selain perbedaan pada cara penulisannya, sepertinya saya tidak menemukan banyak hal yang terasa cukup menguntungkan.
Tailwind kemungkinan menyertakan CSS Normalize, jadi saya penasaran apakah devup-ui juga memiliki kondisi yang sama.

[owjs3901]

Ini bisa dilakukan melalui @devup-ui/reset-css.
Keunggulan terbesarnya adalah solusi CSS-in-JS yang sudah ada dapat dimigrasikan dengan mudah, dan hasil CSS yang lebih ringan daripada tailwind serta CSS Treeshake juga tampaknya menjadi nilai plus yang besar.

Setelah itu, berbeda dengan tailwind, kami juga memperbarui fitur agar CSS dihasilkan per file sehingga chunk dapat di-split. Kami akan terus membedakan produk ini melalui lebih banyak pembaruan.

Terima kasih.