Pemisahan Kode dan Impor Dinamis
Pisahkan bundle secara otomatis berdasarkan rute dan gunakan import() dinamis untuk memuat potongan sesuai kebutuhan.
Pemisahan Kode dan Impor Dinamis adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Pemisahan Otomatis
SvelteKit secara otomatis memisahkan paket berdasarkan rute. Pengunjung hanya mengunduh JS untuk rute yang mereka kunjungi.
Impor Dinamis
Untuk pemisahan yang lebih terperinci, gunakan import() dinamis untuk memuat modul sesuai kebutuhan.
const Heavy = (await import("./Heavy.svelte")).default;Pemuatan Bersyarat
Muat pustaka berat hanya ketika tindakan pengguna tertentu membutuhkannya.
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}Penamaan Potongan
Vite menamai potongan secara cerdas. Anda dapat memberikan petunjuk dengan komentar bergaya webpackChunkName jika diperlukan.
Prapemuatan
Gunakan data-sveltekit-preload-code untuk memuat lebih awal kode rute saat kursor berada di atasnya.
Ukuran Paket
Paket awal yang lebih kecil berarti pemuatan halaman yang lebih cepat dan Metrik Web Inti yang lebih baik.
Tree-Shaking
SvelteKit (melalui Vite/Rollup) secara otomatis menghapus ekspor yang tidak digunakan.
Komponen Malas
Bungkus impor dinamis dalam komponen yang dirender setelah selesai dimuat.
Hal yang Perlu Diwaspadai
Impor dinamis menambahkan batas asinkron. Tangani status pemuatan dengan baik.
Analisis Paket
Gunakan visualisasi paket untuk mengidentifikasi bagian berikutnya yang perlu dipisahkan.
Kapan Tidak Perlu Memisahkan
Untuk modul yang sangat kecil, biaya pemisahan lebih besar daripada penghematannya. Lakukan pembuatan profil untuk menemukan tingkat perincian yang tepat.
Pemeriksaan Singkat
Bagaimana SvelteKit secara bawaan memisahkan paket?
Ringkasan
Pemisahan kode di SvelteKit dilakukan secara otomatis berdasarkan rute. Gunakan import() dinamis untuk pemuatan malas yang lebih terperinci.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemisahan Kode dan Impor Dinamis” gratis?
Ya — teks lengkap “Pemisahan Kode dan Impor Dinamis” 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 “Pemisahan Kode dan Impor Dinamis”?
Pisahkan bundle secara otomatis berdasarkan rute dan gunakan import() dinamis untuk memuat potongan sesuai kebutuhan. 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 1 dari 4.
Berapa lama pelajaran “Pemisahan Kode dan Impor Dinamis” 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