Bileşenleri Tembel Yükleme
Dinamik içer aktarmalar ve kesişim gözlemcileriyle kritik olmayan bileşenlerin işlenmesini erteleyin.
Bileşenleri Tembel Yükleme, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Neden Tembel Yükleme
Başlangıç paketinin boyutunu küçültmek için ağır veya kritik olmayan Component'lerin yüklenmesini erteleyin.
Dinamik İçe Aktarma
Bir modülü zaman uyumsuz olarak yüklemek için import() kullanın.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Yüklendiğinde Oluşturma
Dinamik Component'i oluşturmak için <svelte:component> kullanın.
{#if Component}
<svelte:component this={Component} />
{/if}Kesişim Gözlemcisi
Yer tutucu görünüm alanına girdiğinde yüklemek için IntersectionObserver ile birleştirin.
Eylem Sarmalayıcısı
Bu kalıbı kapsüllemek için yeniden kullanılabilir bir use:lazy eylemi oluşturun.
Yükleme Durumu
Component gelene kadar bir iskelet veya döner simge gösterin.
Ekranın Alt Kısmında Kullanım
Yorumlar, ilgili gönderiler ve alt bilgi araç takımlarının tümü tembel yüklemeye uygundur.
Performans Kazanımları
Başlangıç JS'sini azaltır ve özellikle mobil cihazlarda TTI'yi hızlandırır.
Önceden Getirme
Daha hızlı tepki veren etkileşimler için isteğe bağlı olarak modülleri üzerine gelindiğinde veya görünüm alanına yaklaştığında önceden yükleyin.
Aşırı Bölmeden Kaçının
Küçük Component'lerde dinamik içe aktarmanın ek yükü, sağladığı tasarrufu aşar.
Akışla Birleştirme
Sunucuda oluşturulan sayfalarda akış + tembel hidratasyon, hızlı ilk boyamalar sağlar.
Hızlı Kontrol
Dinamik olarak içe aktarılan bir Component'i nasıl oluşturursunuz?
Özet
Ağır Component'leri dinamik içe aktarma + svelte:component ile tembel olarak yükleyin; bunu isteğe bağlı olarak kesişimle tetikleyebilirsiniz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Bileşenleri Tembel Yükleme” dersi ücretsiz mi?
Evet — “Bileşenleri Tembel Yükleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“Bileşenleri Tembel Yükleme” dersinde ne öğreneceğim?
Dinamik içer aktarmalar ve kesişim gözlemcileriyle kritik olmayan bileşenlerin işlenmesini erteleyin. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Bileşenleri Tembel Yükleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Kod Bölme ve Dinamik İçeri Aktarmalar
- @sveltejs/enhanced-img ile Görselleri İyileştirme
- Bileşenleri Tembel Yükleme
- SvelteKit Uygulamalarında Profil Oluşturma