HTML Academy · Pelajaran

Import() Dinamis dalam Modul

Muat modul sesuai permintaan dengan import() dinamis.

Import() Dinamis dalam Modul adalah pelajaran HTML 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Ekspresi import()

Berbeda dari deklarasi import statis, import("./module.js") adalah ekspresi yang mengembalikan sebuah janji yang menghasilkan ruang nama modul. Ekspresi ini dapat digunakan di mana saja—di dalam fungsi, kondisi, bahkan di dalam skrip nonmodul.

Pemisahan Kode

Impor dinamis adalah mekanisme utama untuk memisahkan kode. Penangan rute dapat menunda pemuatan kode rute hingga pengguna berpindah ke rute tersebut: const mod = await import("./routes/admin.js"). Byte untuk rute tersebut tidak akan diunduh hingga diperlukan.

document.getElementById("settings-btn").addEventListener("click", async () => {
  const { renderSettings } = await import("./settings.js");
  renderSettings();
});

Ruang Nama Modul yang Dikembalikan

Nilai yang telah diselesaikan adalah ruang nama modul—sebuah objek dengan ekspor modul sebagai propertinya. Uraikan ekspor bernama secara sebaris, atau akses ekspor bawaan sebagai module.default.

Menangani Kesalahan

Karena import() mengembalikan sebuah janji, kesalahan dari pengambilan yang gagal atau kesalahan sintaks diteruskan ke .catch(). Bungkus impor dinamis dalam try/catch (di dalam fungsi asinkron) atau .catch() untuk menangani kegagalan jaringan dengan baik.

try {
  const mod = await import("./optional.js");
  mod.run();
} catch (e) {
  console.warn("Optional module failed", e);
}

Pemuatan Bersyarat

Muat pengisi kompatibilitas hanya di peramban lama: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). Peramban modern sepenuhnya melewati byte tersebut; peramban lama hanya menanggung biayanya saat diperlukan.

Resolusi Penentu

Penentu mengikuti aturan yang sama seperti impor statis: URL relatif, URL absolut, atau nama polos yang dipetakan melalui peta impor. String dinamis juga berfungsi: import(`./locales/${lang}.js`), meskipun pengemas mungkin kesulitan memisahkan kode ini.

Penyimpanan dalam Tembolok

Setiap penentu unik diselesaikan menjadi instans modul yang sama. import("./mod.js") kedua mengembalikan modul yang sudah dimuat tanpa perjalanan pulang-pergi jaringan—sehingga impor dinamis aman digunakan dalam penangan kejadian tanpa perlu khawatir tentang pengunduhan berulang.

Impor Dinamis Tingkat Atas

Di dalam modul, Anda dapat menggunakan await tingkat atas bersama impor dinamis untuk menunda eksekusi hingga pembantu yang dimuat secara asinkron tersedia. Cara ini berguna untuk sistem pengaya ketika daftar pengaya baru diketahui saat aplikasi berjalan.

// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();

Gunakan React.lazy dan Preact

React.lazy, `lazy` dari preact/compat milik Preact, dan defineAsyncComponent milik Vue semuanya membungkus impor dinamis untuk pemisahan kode tingkat komponen. Primitif perambannya adalah import(); kerangka kerja menambahkan batas pemuatan mirip suspense di atasnya.

Pemisahan dengan Webpack dan Vite

Pengemas melihat import("...") dalam sumber dan menghasilkan potongan terpisah untuk modul yang diimpor. Rintisan saat berjalan mengambil potongan tersebut saat pemanggilan pertama. Penulis menulis import() sesuai spesifikasi ES; pengemas mengatur orkestrasi jaringannya.

Kesalahan Umum

Memanggil import("X") di dalam jalur yang sering dijalankan (misalnya di dalam perulangan render) akan memeriksa ulang tembolok pada setiap pemanggilan. Meskipun modul tidak diunduh ulang, pencarian tersebut memiliki biaya tambahan. Simpan ruang nama yang telah diselesaikan dalam variabel setelah impor pertama.

Pemeriksaan Pemahaman

Apa yang dikembalikan oleh import("./mod.js")?

Ringkasan

Impor dinamis adalah pasangan sesuai kebutuhan dari deklarasi impor statis. Impor ini mengembalikan sebuah janji yang menghasilkan ruang nama modul, sehingga memungkinkan pemisahan kode, pengisi kompatibilitas bersyarat, dan sistem pengaya. Modul disimpan dalam tembolok setelah impor pertama, sehingga pemanggilan berikutnya tidak memerlukan biaya tambahan. Pengemas menghasilkan potongan terpisah untuk setiap pemanggilan impor dinamis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Import() Dinamis dalam Modul” gratis?

Ya — teks lengkap “Import() Dinamis dalam Modul” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Import() Dinamis dalam Modul”?

Muat modul sesuai permintaan dengan import() dinamis. Kamu berlatih HTML 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 HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML 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 “Import() Dinamis dalam Modul” 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 HTML Academy ini?

Ya. Setiap pelajaran HTML 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

← Kembali ke HTML Academy