React.lazy dan Suspense — Komponen Malas
Pisahkan kode berdasarkan rute atau widget. Muat komponen secara malas dengan React.lazy dan tampilkan cadangan Suspense agar bagian halaman lainnya tetap interaktif.
React.lazy dan Suspense — Komponen Malas adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 3 pelajaran total.
Mengapa melakukan pemisahan kode?
Tujuan: Kirimkan aplikasi lebih cepat dengan memuat kode hanya saat diperlukan.
- React.lazy untuk komponen sesuai permintaan
- Tampilan cadangan Suspense selama pemuatan
- Biarkan bagian UI lainnya tetap dapat digunakan
Target pemisahan
- Rute dan layar besar
- Panel yang jarang digunakan (grafik, penyunting)
- Widget pihak ketiga yang berat
Pilih batas kecil di dekat bagian yang lambat.
Komponen tertunda dasar
Muat komponen secara tertunda ketika pengguna memintanya; Suspense menampilkan pesan kecil sementara itu.
<div id="root"></div>
Pemisahan bergaya rute
Pisahkan hanya tab Rincian. Daftar tetap siap; batas mengisolasi area yang lambat.
<div id="root"></div>
Prapemuatan vs pemuatan tertunda sesuai permintaan
Pertimbangkan prapemuatan ketika Anda dapat memprediksi maksud pengguna (misalnya, saat kursor diarahkan atau elemen mendapat fokus). Pertahankan batas tetap kecil dan tampilan cadangan tetap ringan.
- Prapuat saat kursor diarahkan
- Muat secara tertunda sesuai permintaan
- Tampilkan kerangka, bukan pemutar seluruh halaman
Kesalahan umum & kiat
- Hindari satu batas raksasa di akar aplikasi
- Jangan sembunyikan perubahan tata letak dengan tampilan cadangan; sesuaikan ukurannya
- Lakukan pemisahan berdasarkan alur pengguna, bukan berdasarkan setiap berkas kecil
Pemeriksaan tujuan lazy + Suspense
Ringkasan
Ringkasan: Pisahkan rute atau widget berat dengan React.lazy, bungkus dengan Suspense, dan gunakan tampilan cadangan kecil agar bagian UI lainnya tetap responsif.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “React.lazy dan Suspense — Komponen Malas” gratis?
Ya — teks lengkap “React.lazy dan Suspense — Komponen Malas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “React.lazy dan Suspense — Komponen Malas”?
Pisahkan kode berdasarkan rute atau widget. Muat komponen secara malas dengan React.lazy dan tampilkan cadangan Suspense agar bagian halaman lainnya tetap interaktif. Kamu berlatih React 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 React Academy?
Tidak diperlukan pengalaman sebelumnya. React 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 1 dari 3.
Berapa lama pelajaran “React.lazy dan Suspense — 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 React Academy ini?
Ya. Setiap pelajaran React 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
- React.lazy dan Suspense — Komponen Malas
- Pemisahan Berbasis Rute & Tingkat Komponen
- Bundel, Cache & Petunjuk Pemuatan Awal