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üğü

Sıradaki ders: Import aliases

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler