HTML Academy · Ders

Modüllerde Dinamik import()

Modülleri gerektiğinde dinamik import() ile yükleyin

Modüllerde Dinamik import(), CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

import() İfadesi

Statik içe aktarma bildiriminden farklı olarak import("./module.js"), modülün ad alanına çözümlenen bir sonuç vaadi döndüren bir ifadedir. Her yerde çalışır: işlevlerin içinde, koşullarda ve hatta modül olmayan betiklerin içinde.

Kod Bölme

Dinamik içe aktarma, kod bölmenin temel mekanizmasıdır. Bir yol işleyicisi, yolun kodunu kullanıcı o yola gidene kadar yüklemeyi erteleyebilir: const mod = await import("./routes/admin.js"). Yolun kodunu oluşturan baytlar ihtiyaç duyulana kadar hiç indirilmez.

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

Döndürülen Modül Ad Alanı

Çözümlenen değer, modülün ad alanıdır; modülün dışa aktarımlarını özellik olarak içeren bir nesnedir. Adlandırılmış dışa aktarımları satır içinde yapıdan çıkarabilir veya varsayılan dışa aktarımına module.default olarak erişebilirsiniz.

Hataları Yakalama

import() bir vaat döndürdüğü için başarısız bir getirme işleminden veya söz dizimi hatasından kaynaklanan hatalar .catch() yöntemine aktarılır. Ağ hatalarını düzgün şekilde ele almak için dinamik içe aktarmaları eşzamansız işlevlerde try/catch ile veya .catch() ile sarın.

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

Koşullu Yükleme

Uyumluluk dolgularını yalnızca eski tarayıcılarda yükleyin: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). Modern tarayıcılar bu baytları hiç indirmez; eski tarayıcılar ise maliyete yalnızca gerektiğinde katlanır.

Belirtici Çözümleme

Belirtici, statik içe aktarmayla aynı kuralları izler: göreli URL'ler, mutlak URL'ler veya içe aktarma haritasıyla eşlenen yalın adlar. Dinamik dizeler de çalışır: import(`./locales/${lang}.js`); ancak paketleyiciler bunu kod bölme konusunda zorlanabilir.

Önbelleğe Alma

Her benzersiz belirtici aynı modül örneğine çözümlenir. İkinci import("./mod.js"), ağ üzerinden yeniden iletişim kurmadan zaten yüklenmiş modülü döndürür. Böylece dinamik içe aktarmayı, tekrar tekrar indirme konusunda endişelenmeden olay işleyicilerinde güvenle kullanabilirsiniz.

Üst Düzey Dinamik İçe Aktarma

Bir modülün içinde, eşzamansız olarak yüklenen bir yardımcı kullanılabilir olana kadar yürütmeyi geciktirmek için üst düzey beklemeyi dinamik içe aktarmayla birlikte kullanabilirsiniz. Bu, eklenti listesinin çalışma zamanında bilindiği eklenti sistemleri için kullanışlıdır.

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

React.lazy ve Preact ile Kullanım

React.lazy, Preact'in preact/compat içindeki `lazy` işlevi ve Vue'nun defineAsyncComponent işlevi, bileşen düzeyinde kod bölmek için dinamik içe aktarmayı sarar. Tarayıcıdaki temel ilkel import() ifadesidir; çerçeveler bunun üzerine askıya alma benzeri yükleme sınırları ekler.

Webpack ve Vite ile Kod Bölme

Paketleyiciler kaynak kodda import("...") gördüklerinde, içe aktarılan modül için ayrı bir parça üretir. Çalışma zamanı yardımcısı, ilk çağrıda bu parçayı getirir. Geliştirici ES belirtimindeki import() ifadesini yazar; paketleyici ağ akışını oluşturur.

Yaygın Hata

import("X") ifadesini yoğun kullanılan bir yolda (örneğin bir oluşturma döngüsünün içinde) çağırmak, önbelleği her çağrıda yeniden denetler. Yeniden indirme yapılmasa da aramanın bir maliyeti vardır. İlk içe aktarmadan sonra çözümlenmiş ad alanını bir değişkende saklayın.

Bilginizi Sınayın

import("./mod.js") ne döndürür?

Özet

Dinamik import(), statik içe aktarma bildiriminin isteğe bağlı yüklenen karşılığıdır. Kod bölmeyi, koşullu uyumluluk dolgularını ve eklenti sistemlerini mümkün kılan, modül ad alanına çözümlenen bir sonuç vaadi döndürür. Modüller ilk içe aktarmadan sonra önbelleğe alınır; sonraki çağrılar ek maliyet oluşturmaz. Paketleyiciler her dinamik içe aktarma çağrısı için ayrı parçalar üretir.

Sıkça Sorulan Sorular

“Modüllerde Dinamik import()” dersi ücretsiz mi?

Evet — “Modüllerde Dinamik import()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Modüllerde Dinamik import()” dersinde ne öğreneceğim?

Modülleri gerektiğinde dinamik import() ile yükleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Modüllerde Dinamik import()” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön