Tembel mod
EffCSS, varsayılan olarak CSS'i hemen (eagerly) oluşturur: Bir yardımcı işlevi (utility) çağırdığınız anda, ilgili stil sayfası kuralları CSSOM'a yazılır. Tembel modda (lazy mode) ise asıl oluşturma işlemi ertelenir; CSS, yalnızca üretilen resolver (çözücü) fiilen kullanıldığında (çağrıldığında veya bir string'e dönüştürüldüğünde) stil sayfasına aktarılır.
Tembel mod iki farklı biçimde sunulur; böylece ihtiyaç duyduğunuz kontrol düzeyini seçebilirsiniz:
| Nitelik | Tetikleyici | Kapsam |
|---|---|---|
| Kontrollü | isteğe bağlı (opt-in) lazy* yardımcıları | yardımcı başına, her zaman tembel (lazy) |
| Kütüphane düzeyi | configure({ lazy: true }) | bir resolver döndüren her oluşturucu yardımcı işlev |
Bağımsız olarak çalışırlar ve birleştirilebilirler.
1. Kontrollü — lazy* yardımcıları
Bu yardımcı araçlar, herhangi bir genel yapılandırmadan bağımsız olarak her zaman "lazy" (tembel/gecikmeli) çalışır. Her çağrı bir işlev çözümleyici (function-resolver) döndürür. Siz şunları yapana kadar hiçbir şey üretilmez:
- çözümleyiciyi çağırmak —
fn()(veyafn(...args)), - onu bir dizgiye (string) dönüştürmek —
`${fn}`veyaString(fn).
Kural içeriği, bir nesne olarak veya söz konusu nesneyi döndüren bir işlev olarak geçirilebilir. İşlev, "lazy" bir şekilde, yani ilk hazırlık (warm-up) aşamasında değerlendirilir.
| Fonksiyon | Döndürür | Oluşturur |
|---|---|---|
lazyClassName(rule) (veya className.lazy(rule)) | () => string (sınıf adı) | bir anonim sınıf kuralı |
lazyAttribute(rule) (veya attribute.lazy(rule)) | () => object ({ 'data-…': '' }) | tek bir anonim nitelik kuralı |
lazyClassNames(gen) (veya classNames.lazy(gen)) | CSS seçici oluşturucu fonksiyonu | bir sınıf seçicili stil sayfası |
lazyAttributes(gen) (veya attributes.lazy(gen)) | CSS seçici oluşturma fonksiyonu | öznitelik seçicili stil sayfası |
lazyCustomStyles(gen) (veya customStyles.lazy(gen)) | CSS seçici oluşturma fonksiyonu | özel bir stil sayfası |
Değişikliklerden önce - derhal
Her çağrı, sonuç sayfada hiç kullanılmasa bile, anında bir kural oluşturur.
Değişikliklerden sonra — kontrollü tembel
lazyClassName (className.lazy) ve lazyAttribute (attribute.lazy) dahil olmak üzere tüm "lazy" (tembel/gecikmeli) işleyicilerin fonksiyon döndürdüğüne dikkat edin. Bireysel kural "lazy" çözümleyicileri (resolvers) için bu durum ek bir avantaj sağlar: böyle bir çözümleyiciyi bir string'e (metin dizisine) dönüştürdüğünüzde, diğer stillerde kullanılabilen doğru seçici (selector) elde edilir:
Üstelik bu fonksiyonlar, yalnızca bir nesneyi değil, aynı zamanda bir üreteci de kabul edebilir:
Önemli:
className/attribute, fonksiyon olmayan bir değer (string/ nesne) döndürür; bunlar "lazy" (tembel değerlendirmeli) değildir ve bu bağlamda işin içine dahil olmazlar.
2. Kütüphane düzeyi — configure({ lazy: true })
configure({ lazy: true }), bir fonksiyon-çözücü (function-resolver) döndüren tüm üretim yardımcılarını anında "lazy" (tembel/gecikmeli) sürümlerine geçirir:
variable, variables, animation, animations, layer, layers, font, fonts, classNames, attributes, customStyles.
Aynı API'yi yazmaya devam ediyorsunuz; lazy* isimlerine başvurmanıza gerek yok. Bu yardımcı araçların her biri artık, sonucu kullanılana kadar üretim işlemini erteliyor.
className ve attribute bundan etkilenmiyor: Bunlar çözümleyici (resolver) yerine doğrudan değerler (string / nesne) döndürdükleri için, üretim işlemini anında gerçekleştirmeye devam ediyorlar.
Öncesi — varsayılan (hevesli/anında yükleme)
Sonrasında — configure({ lazy: true })
Çoğul yapıdaki yardımcı öğeler (variables, animations, layers, fonts vb.) için tüm grup birlikte hazırlanır: herhangi bir çözümleyiciye (resolver) dokunulması tüm setin oluşturulmasını sağlar; böylece SSR hydration süreci için sıralamanın deterministik kalması güvence altına alınır.
Davranış notları
- Isınma tetikleyicileri — bir çözümleyici çağırılarak veya dize zorlamasıyla ısıtılır. Yalnızca onu tutmak (veya değişkenler için
.get()/.set()'i çağırmak) herhangi bir CSS oluşturmaz. variable().get()/.set()— ısınmadan önce,get(), ``'değerini döndürür veset()`, işlem dışıdır; ancak çözümleyici ısındıktan sonra aktif hale gelirler.update()— tembel modda henüz oluşturulmamış değişkenleri değiştirmez.- SSR hidrasyonu — oluşturma sırası deterministiktir (paylaşılan dahili sayaçlar), dolayısıyla sunucu ve istemci, çözümleyicileri aynı sırada ısıttıkları sürece aynı seçicileri üretir.
abone olmaolayları — `EffCSSEvent'ler, yardımcı program ilk kez çağrıldığında değil, gerçek oluşturma (çözümleyici ısınması) anında yayılır.
İkisi arasında seçim yaparken
- Yalnızca belirli kurallar için "tembellik" (lazy loading) isteyip geri kalanını "hevesli" (eager/anında yüklenen) tutmak istediğinizde veya uygulama genelindeki ayarlardan bağımsız olarak tembelliği garanti altına almak istediğinizde kontrollü
lazy*yardımcılarını kullanın. - Kodunuzu değiştirmeden tüm kütüphane genelinde kapsamlı bir yalnızca kullanılanı yükleme davranışı istediğinizde (örneğin, yalnızca gerçekten oluşturulan/render edilen CSS'i sunmak için
vite-plugin-effcssile birlikte)configure({ lazy: true })kullanın.