▲

Show GN: tailwindcss 보다 더 빠르고 작은 CSS 결과물

 (github.com/dev-five-git)
3P by owjs3901 2달전 | ★ favorite | 댓글 2개

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

모두 같은 코드(일부는 타 라이브러리에 더 유리한 코드입니다, 모든 테스트 코드가 오픈소스로 열려있습니다!)로 벤치마크가 진행되었으며 모든 상황에서 속도는 1위 tailwind와 같은 방식으로 css를 생성했을 때(single css) 기준으로 가장 작은 빌드 결과물을 보여주고 있습니다.

많은 관심 부탁드립니다!

▲
tjddnjsjo 2달전  [-]

프런트엔드 컨퍼런스에서 들었던 발표로는 테일윈드와 내부 동작에 대한 접근이 유사하다고 느꼈고, 작성법에 대한 차이 정도 외에는 크게 메리트를 느낄 만한 요소를 찾지 못했던 것 같습니다.
테일윈드는 CSS Normalize를 포함하고 있을 텐데 devup-ui도 동일한 조건인지 궁금하네요.

답변달기
▲
owjs3901 2달전  [-]

@devup-ui/reset-css 를 통하여 진행할 수 있습니다.
가장 큰 장점이라면 기존 CSS-in-JS 솔루션을 쉽게 마이그레이션할 수 있다는 것과 tailwind보다 더 가벼운 CSS 결과물 또한 CSS Treeshake 도 큰 장점일 것 같습니다.

이후 tailwind와는 다르게 각 파일마다 CSS를 생성되도록 하여 chunk를 split하는 기능 또한 업데이트를 하였습니다, 더 많은 업데이트를 통하여 차별화시키겠습니다.

감사합니다.

답변달기