Pemuatan Komponen Lewat
Tangguhkan pemaparan komponen tidak kritikal dengan import dinamik dan pemerhati persilangan.
Pemuatan Komponen Lewat ialah pelajaran Sveltejs Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sveltejs Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.
Sebab Pemuatan Tertangguh
Tangguhkan pemuatan Component Heavy atau yang tidak kritikal untuk mengurangkan saiz himpunan awal.
Import Dinamik
Gunakan import() untuk memuatkan modul secara tidak segerak.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Paparkan Apabila Dimuatkan
Gunakan <svelte:component> untuk memaparkan Component dinamik.
{#if Component}
<svelte:component this={Component} />
{/if}Pemerhati Persilangan
Gabungkan dengan IntersectionObserver untuk memuatkan kandungan apabila ruang letak sementara memasuki ruang pandang.
Pembalut Tindakan
Bina tindakan use:lazy yang boleh digunakan semula untuk merangkum corak tersebut.
Keadaan Pemuatan
Paparkan rangka atau pemutar sehingga Component tersedia.
Penggunaan Bawah Lipatan
Komen, kiriman berkaitan dan widget pengaki semuanya sesuai untuk pemuatan tertangguh.
Peningkatan Prestasi
Mengurangkan JS awal dan mempercepatkan TTI, terutamanya pada peranti mudah alih.
Pratarik
Jika mahu, muatkan modul terlebih dahulu apabila kursor berada di atasnya atau apabila modul menghampiri ruang pandang untuk interaksi yang lebih pantas.
Elakkan Pemisahan Berlebihan
Untuk Component yang sangat kecil, overhed import dinamik melebihi penjimatan yang diperoleh.
Gabungkan dengan Penstriman
Untuk halaman yang dipaparkan pada pelayan, penstriman + penghidratan tertangguh menghasilkan paparan awal yang pantas.
Semakan Pantas
Bagaimanakah anda memaparkan Component yang diimport secara dinamik?
Ringkasan
Muatkan Component Heavy secara tertangguh dengan import dinamik + svelte:component, yang boleh dicetuskan oleh persilangan.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Pemuatan Komponen Lewat” percuma?
Ya — teks penuh “Pemuatan Komponen Lewat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sveltejs Academy, tingkat taraf kepada CoddyKit PRO. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pemuatan Komponen Lewat”?
Tangguhkan pemaparan komponen tidak kritikal dengan import dinamik dan pemerhati persilangan. Anda berlatih Sveltejs Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Sveltejs Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Sveltejs Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Pemuatan Komponen Lewat” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Pemisahan Kod dan Import Dinamik
- Mengoptimumkan Imej dengan @sveltejs/enhanced-img
- Pemuatan Komponen Lewat
- Membuat Profil Aplikasi SvelteKit