Dynamic import
import() ifadesi ile modülü çalışma anında yüklemeyi öğrenirsin.
Dinamik içe aktarım nedir?
Dinamik içe aktarım (dynamic import), bir modülü çalışma anında import() ifadesiyle yüklemektir. Statik import en başta yüklenir; import() ise sen çağırdığında yüklenir.
import() bir promise döndürür; bu yüzden await ile birlikte kullanılır. Modül hazır olunca promise çözülür ve modülün dışa aktardığı değerleri alırsın.
Bu yöntem, yalnızca gerektiğinde kod yüklemek (tembel yükleme) ve büyük paketleri bölmek için kullanılır.
await ile kullanım
Bir modülü çalışma anında yüklemek için await ile import() çağrısı yazarsın. Sonuç, modülün dışa aktardığı değerleri taşıyan bir nesnedir.
const mod = await import('./heavy.js');
console.log(mod.draw());Burada heavy.js yalnızca bu satır çalıştığında yüklenir; sayfa açılışında değil. Böylece ilk yükleme hızlı kalır.
Uygulama Modülü çalışma anında yükle
./chart.js modülünü await import() ile çalışma anında yükle ve sonucu chart değişkenine ata. Sonra chart.draw() çağrısının sonucunu console.log ile yazdır.
Örnek çözümü göster
await import ile modülü yükle ve chart'a ata, sonra draw'u çağır.
Örnek çözüm:
const chart = await import('./chart.js');
console.log(chart.draw());Kendini test et
-
import() ifadesi ne döndürür?
- bir dizi
- bir promise
- bir sayı
- bir boolean
Cevabı göster
bir promise — Doğru! import() bir promise döndürür; await ile beklenir.
-
Dinamik içe aktarımı tamamla
const mod = ____('./heavy.js');Cevabı göster
const mod = await import('./heavy.js'); -
Kavramları eşleştir
- import()
- çalışma anında yükler
- await
- promise'i bekler
- statik import
- en başta yükler
- promise
- import()'un döndürdüğü