Bundel, Cache & Petunjuk Pemuatan Awal
Pahami bundel dan penyimpanan cache: hash konten, aset tak berubah, serta HTML sebagai sakelar. Gunakan pemuatan awal yang ringan agar interaksi terasa seketika.
Bundel, Cache & Petunjuk Pemuatan Awal adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 bundel + cache penting
Tujuan: Kirimkan bundel yang lebih kecil dan biarkan peramban menyimpannya dalam cache dengan aman.
- Nama berkas yang memiliki hash konten
- Cache yang tidak dapat diubah untuk aset
- HTML hanya disimpan dalam waktu singkat
Dasar-dasar strategi cache
- Nama berkas dengan hash: app.3f2a1.js
- Cache-Control: max-age=31536000, immutable
- HTML: TTL singkat (misalnya, no-store atau beberapa menit)
- Pisahkan kode yang jarang digunakan
Demonstrasi: memanaskan awal potongan tertunda
Prapemuatan berdasarkan maksud: mulai mengambil potongan tertunda lebih awal agar tampilan berikutnya terasa seketika.
<div id="root"></div>
Demonstrasi: prapemuatan gambar
Muat gambar terlebih dahulu sebelum menampilkannya. Saat diubah, gambar muncul seketika dari cache.
<div id="root"></div>
Prapemuatan vs pengambilan awal (konsep)
- Prapemuatan: prioritas tinggi untuk aset yang akan segera dibutuhkan
- Pengambilan awal: prioritas rendah untuk aset yang kemungkinan dibutuhkan nanti
- Gunakan secukupnya untuk menghindari persaingan jaringan
Kesalahan umum & header cache
Hindari melakukan prapemuatan untuk segala sesuatu secara berlebihan. Gunakan hash konten dan tetapkan cache yang tidak dapat diubah untuk bundel; pertahankan HTML agar hanya disimpan dalam waktu singkat sehingga hash baru dapat diterapkan dengan cepat.
Pemeriksaan praktik terbaik pembuatan cache
Ringkasan
Ringkasan: Beri hash pada nama file bundel dan simpan dalam cache untuk waktu yang lama. Gunakan masa berlaku HTML yang singkat, serta preload/prefetch secara bijaksana agar tampilan berikutnya terasa muncul seketika.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Bundel, Cache & Petunjuk Pemuatan Awal” gratis?
Ya — teks lengkap “Bundel, Cache & Petunjuk Pemuatan Awal” 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 “Bundel, Cache & Petunjuk Pemuatan Awal”?
Pahami bundel dan penyimpanan cache: hash konten, aset tak berubah, serta HTML sebagai sakelar. Gunakan pemuatan awal yang ringan agar interaksi terasa seketika. 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 3 dari 3.
Berapa lama pelajaran “Bundel, Cache & Petunjuk Pemuatan Awal” 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