stackbenchstack benchmark

Kıyas / Hat D

Bileşen kütüphanesi

Kategori: Bileşen kütüphanesi

Özet hüküm

Bu görevde JS+CSS aktarımında fark küçük ve kararlı (Kokonut UI 197,4 kB, shadcn/ui 194,5 kB; yaklaşık %1,5, pratikte önemsiz).

JS+CSS aktarımı

  • Kokonut UI 197,4 kB
  • shadcn/ui 194,5 kB

Fark küçük ve kararlı (yaklaşık %1,5)

Nasıl ölçüldü

JS+CSS (aktarım)

Bellek (JS heap)

Kokonut UI

7,38 MB

%3 daha iyi

düşük iyi

Nasıl ölçüldü

Etkileşim sonrası en yüksek JS heap (yükleme ve bir etkileşim sonrası okumanın büyüğü; süreç RSS değil)

Sahneler aynı istem (görsel; ölçüm değil).

Demolar uzun: kutunun içinde aşağı kaydırarak tamamını görebilirsiniz.

Kokonut UI

Demo: /demo/kiyas-d/kokonut

shadcn/ui

Demo: /demo/kiyas-d/shadcn

Ölçüm tablosu

JS+CSS aktarım ve istek sayısı: önbellek kapalı, 5 koşu. Heap: yükleme sonrası ve bir etkileşim sonrası iki okumanın büyüğü (--enable-precise-memory-info), süreç RSS değil. Kurulum ve bağımlılık, sahnelerin içe aktardığı paketlerden okunur.

Kokonut UI'da modal, bildirim ve form alanı bileşeni yok; bu parçalar yerel HTML ile yapıldı. shadcn tarafında Dialog, Sonner ve Input kullanıldı. Bu fark etkileşim sonrası belleği etkiler.

ÖlçümKokonut UIshadcn/uiYön
JS+CSS aktarımı
Nasıl ölçüldü

JS+CSS (aktarım)

197,4 kB (197,4 kB–197,4 kB)
koşular: 197,4, 197,4, 197,4, 197,4, 197,4 (5 koşuda aynı)		194,5 kB (194,5 kB–194,5 kB)
koşular: 194,5, 194,5, 194,5, 194,5, 194,5 (5 koşuda aynı)		fark yok düşük iyi
İstek sayısı14 adet (14 adet–14 adet)
koşular: 14, 14, 14, 14, 14 (5 koşuda aynı)		13 adet (13 adet–13 adet)
koşular: 13, 13, 13, 13, 13 (5 koşuda aynı)		karşılaştırma yapılmaz düşük iyi
Bellek (JS heap)
Nasıl ölçüldü

Etkileşim sonrası en yüksek JS heap (yükleme ve bir etkileşim sonrası okumanın büyüğü; süreç RSS değil)

7,38 MB (7,35 MB–7,39 MB)
koşular: 7,4, 7,4, 7,3, 7,4, 7,4		7,61 MB (7,59 MB–7,64 MB)
koşular: 7,6, 7,6, 7,6, 7,6, 7,6		Kokonut UI düşük iyi
Kurulum boyutu
Nasıl ölçüldü

Kurulum boyutu (node_modules, paket+transitif)

kapsam: sahnelerin içe aktardığı paketler (react, react-dom, next, clsx, tailwind-merge iki tarafta ortak, dışarıda). Kopyalanan bileşen kodu paket sayılmaz. Bu satırda kazanan vurgusu yok, değerler düz. Paylar: Kokonut UI: en büyük pay framer-motion 8.0 MB; çıkarılırsa 6.0 MB; shadcn/ui: en büyük pay lucide-react (ikon paketi) 37.2 MB; çıkarılırsa 5.4 MB

14,0 MB (14,0 MB–14,0 MB)42,7 MB (42,7 MB–42,7 MB)karşılaştırma yapılmaz düşük iyi
Paket sayısı
Nasıl ölçüldü

Doğrudan içe aktarılan paket sayısı

1 adet (1 adet–1 adet)5 adet (5 adet–5 adet)karşılaştırma yapılmaz düşük iyi

Bellek (JS heap)

Kokonut UI
7,38 MB
shadcn/ui
7,61 MB
Görev, istem ve koşullar

Görev

Görev (Hat D)

Kurgusal Tasnora için aynı küçük ekran: üç plan için fiyat kartları, iletişim formu (ad, e-posta, mesaj, gönder), planı incelemek için bir modal, üç sekme ve form gönderilince çıkan bir bildirim (toast).

Bu hat, aynı ekranı Kokonut UI (shadcn kayıt defterinden kopyalanan Kokonut bileşenleri) ve düz shadcn/ui (taban: Button, Card, Dialog, Tabs, Input, Textarea, Label, Sonner) ile yan yana kıyaslar.

İstem

İstem (Hat D)

Tasnora için tek ekran. İçerik lib/demo-icerik.ts olsun; iki tarafta kullanılan alanlar aynı olsun (marka, açıklama, özellikler, planlar, form alanları ve onay). Tasarım tokenları projenin kendi tokenları olsun, kutu ölçüsü aynı olsun (en çok 720 px).

Ekranda şunlar bulunsun:

  1. Üç sekme: üç özellik, sekme başına özelliğin ayrıntısı.
  2. Üç plan kartı: ad, fiyat, açıklama, içerik listesi ve "Planı incele" düğmesi.
  3. Modal: seçilen planın adı, notu, fiyatı ve kurgusal ürün notu. Kapatılabilir.
  4. İletişim formu: ad, e-posta, mesaj ve gönder. Gönderince bildirim (toast) belirsin; veri hiçbir yere gitmez.
  5. "Kurgusal ürün" notu görünür kalsın.

Kokonut tarafı Kokonut bileşenlerini, shadcn tarafı shadcn/ui bileşenlerini kullansın; bir tarafta karşılığı olmayan parça yerel HTML ile yazılsın ve bu kosullar.md'de açıkça yazılsın.

Koşullar

Ölçüm protokolü ve ham koşu günlüğü ölçüm dosyasındadır. Lisans bilgisi için Lisanslar sayfasına bakın.