Kết quả CSS nhanh hơn và nhỏ hơn cả tailwindcss
(github.com/dev-five-git)Xin chia sẻ kết quả benchmark với Devup UI và các thư viện khác!
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 được tiến hành với cùng một đoạn mã cho tất cả trường hợp (một số đoạn còn có lợi hơn cho các thư viện khác, và toàn bộ mã kiểm thử đều được mở nguồn!). Trong mọi tình huống, khi tạo CSS theo cùng cách với tailwind đứng số 1 về tốc độ (single css), kết quả cho thấy sản phẩm build có kích thước nhỏ nhất.
Mong nhận được nhiều sự quan tâm!
2 bình luận
Theo bài thuyết trình tôi nghe ở một hội nghị frontend, tôi cảm thấy cách tiếp cận của nó với Tailwind và cơ chế hoạt động bên trong khá giống nhau, và ngoài sự khác biệt về cách viết ra thì có vẻ tôi không tìm được yếu tố nào đủ nổi bật để cảm nhận được lợi thế lớn.
Tailwind có lẽ có bao gồm CSS Normalize, nên tôi cũng tò mò không biết devup-ui có cùng điều kiện như vậy hay không.
Có thể thực hiện thông qua
@devup-ui/reset-css.Ưu điểm lớn nhất là có thể dễ dàng di chuyển từ các giải pháp CSS-in-JS hiện có, đồng thời tạo ra CSS nhẹ hơn cả Tailwind, và khả năng treeshake CSS cũng có vẻ là một ưu điểm rất lớn.
Sau đó, khác với Tailwind, chúng tôi cũng đã cập nhật tính năng tạo CSS theo từng tệp để có thể split chunk; chúng tôi sẽ tiếp tục tạo sự khác biệt thông qua nhiều bản cập nhật hơn nữa.
Xin cảm ơn.