Pemuatan Komponen Malas
Tunda rendering komponen yang tidak kritis dengan impor dinamis dan pengamat persimpangan.
Pemuatan Komponen Malas adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Mengapa Menggunakan Pemuatan Malas
Tunda pemuatan komponen berat atau nonkritis untuk mengurangi ukuran paket awal.
Impor Dinamis
Gunakan import() untuk memuat modul secara asinkron.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Render Setelah Dimuat
Gunakan <svelte:component> untuk merender komponen dinamis.
{#if Component}
<svelte:component this={Component} />
{/if}Pengamat Persimpangan
Gabungkan dengan IntersectionObserver untuk memuat komponen saat tempat penampung memasuki area pandang.
Pembungkus Aksi
Buat aksi use:lazy yang dapat digunakan kembali untuk merangkum pola ini.
Status Pemuatan
Tampilkan kerangka atau pemutar hingga komponen selesai dimuat.
Penggunaan di Bawah Lipatan
Komentar, kiriman terkait, dan widget footer semuanya cocok untuk pemuatan malas.
Peningkatan Kinerja
Mengurangi JS awal dan mempercepat TTI, terutama pada perangkat seluler.
Pramuat
Secara opsional, muat modul lebih awal saat kursor berada di atasnya atau saat modul mendekati area pandang agar interaksi terasa lebih cepat.
Hindari Pemisahan Berlebihan
Untuk komponen kecil, biaya tambahan impor dinamis lebih besar daripada penghematannya.
Gabungkan dengan Streaming
Untuk halaman yang dirender di server, streaming + hidrasi malas menghasilkan tampilan awal yang cepat.
Pemeriksaan Singkat
Bagaimana cara merender komponen yang diimpor secara dinamis?
Ringkasan
Muat komponen berat secara malas dengan impor dinamis + svelte:component, yang secara opsional dipicu saat komponen memasuki area pandang.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemuatan Komponen Malas” gratis?
Ya — teks lengkap “Pemuatan Komponen Malas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pemuatan Komponen Malas”?
Tunda rendering komponen yang tidak kritis dengan impor dinamis dan pengamat persimpangan. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Pemuatan Komponen Malas” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pemisahan Kode dan Impor Dinamis
- Mengoptimalkan Gambar dengan @sveltejs/enhanced-img
- Pemuatan Komponen Malas
- Membuat Profil Aplikasi SvelteKit