Analisis Bundel & Menghapus Kode Tak Terpakai
Baca laporan bundel, temukan modul besar, dan kecilkan ukurannya dengan kode yang ramah tree-shaking: ekspor bernama ESM, tanpa efek samping tingkat atas, serta pemuatan malas bila sesuai.
Analisis Bundel & Menghapus Kode Tak Terpakai adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 menganalisis bundel?
Tujuan: Perkecil bundel Anda.
- Baca laporan bundel
- Gunakan ESM yang mendukung pemangkasan kode tak terpakai
- Muat layar yang jarang digunakan sesuai kebutuhan
Sinyal dalam laporan
- Dependensi besar (grafik, pustaka tanggal)
- Versi duplikat
- Efek samping tingkat teratas
- Impor bawaan yang menarik seluruh paket
Ekspor bernama, tanpa efek samping
Utamakan ekspor bernama dan pertahankan modul tetap murni (tanpa efek samping saat impor).
<div id="root"></div>Tanpa efek samping tingkat teratas
Hindari efek samping saat impor; sediakan fungsi dan panggil fungsi tersebut setelah impor.
<div id="root"></div>Memuat sesuai kebutuhan dengan React.lazy
Muat layar yang jarang digunakan sesuai kebutuhan agar bundel awal tetap kecil; tampilkan cadangan kecil.
<div id="root"></div>Kiat & daftar periksa
- Gunakan ekspor bernama ESM
- Pertahankan modul tetap murni (tanpa pekerjaan saat impor)
- Muat sesuai kebutuhan rute atau widget yang jarang digunakan
- Utamakan alternatif yang lebih kecil (misalnya, dayjs daripada moment)
Pemeriksaan dasar pemangkasan kode
Ringkasan
Ringkasan: Baca laporan bundel, beralih ke ekspor bernama ESM, hapus efek samping saat impor, dan muat layar yang jarang digunakan sesuai kebutuhan agar bundel awal tetap ramping.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Analisis Bundel & Menghapus Kode Tak Terpakai” gratis?
Ya — teks lengkap “Analisis Bundel & Menghapus Kode Tak Terpakai” 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 “Analisis Bundel & Menghapus Kode Tak Terpakai”?
Baca laporan bundel, temukan modul besar, dan kecilkan ukurannya dengan kode yang ramah tree-shaking: ekspor bernama ESM, tanpa efek samping tingkat atas, serta pemuatan malas bila sesuai. 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 2 dari 3.
Berapa lama pelajaran “Analisis Bundel & Menghapus Kode Tak Terpakai” 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
- Build Pengembangan/Produksi, Peta Sumber, Lingkungan
- Analisis Bundel & Menghapus Kode Tak Terpakai
- CI Dasar: Pemeriksaan → Pengujian → Build