Kaynak İpuçları: modulepreload
Daha hızlı JavaScript başlangıcı için ES modüllerini önceden yükleyin
Kaynak İpuçları: modulepreload, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. 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.
modulepreload Neden Var
ES modülleri bir bağımlılık grafiği oluşturur: bir giriş modülü başkalarını içe aktarır, onlar da daha fazlasını içe aktarır. Yardım alınmadığında ağacın her düzeyi ancak önceki düzey ayrıştırıldıktan sonra keşfedilir; bu da yükleme performansını ciddi biçimde bozan sıralı bir şelale oluşturur.
modulepreload Ne Yapar
<link rel="modulepreload" href="/app.js">, tarayıcıya modülü AND onun geçişli olarak içe aktardığı modülleri hemen ve paralel biçimde getirmesini söyler. <script type="module"> çalıştığında tüm grafik zaten önbellektedir.
preload ile Karşılaştırma
preload da dosyaları paralel olarak getirir, ancak içe aktarma ifadelerinden haberdar değildir; bir modül dosyasını önceden yüklemek, bağımlılıklarını önceden yüklemez. modulepreload içe aktarmaları otomatik olarak izler; asıl amacı da budur.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Nereye Yerleştirilmeli
<head> içinde, mümkün olduğunca erken. Tarayıcı preload isteğini hemen başlatır ve HTML'yi ayrıştırmaya devam eder. Belgenin ilerleyen kısmında eşleşen <script type="module"> ile karşılaşıldığında dosya zaten bellektedir.
Keşif ve Grafik Taraması
Tarayıcı, içe aktarma ifadelerini aramak için önceden yüklenen modülü ayrıştırır; ardından içe aktarılan her URL için özyinelemeli olarak paralel getirme işlemleri başlatır. Kullanıcı her düzey için bir gidiş-dönüş maliyetini üstlenir, ancak her düzeyde paralellik kazanır; bu da kritik yolu büyük ölçüde kısaltır.
Paketleyicilerle Kullanım
Modern paketleyiciler (Vite, Rollup, Webpack 5+) kod bölümlendirilmiş parçalar için modulepreload etiketlerini otomatik olarak üretir. Elle hazırlanmış uygulamalarda, modüller eklendikçe veya kaldırıldıkça listenin doğru kalması için bunları derleme zamanında içe aktarma grafiğinden üretin.
CrossOrigin Konuları
Farklı kaynaklı modül ön yüklemelerinde crossorigin="anonymous" ekleyin. Bu, <script type="module"> öğesinin varsayılan getirme moduyla eşleşir ve CORS üst bilgileri olmadan yeniden getirilmek yerine önceden yüklenen kopyanın yeniden kullanılmasını sağlar.
Tarayıcı Desteği
modulepreload, Chrome/Edge/Safari ve Firefox'un yeni sürümlerinde desteklenir. Eski Firefox sürümlerinde sessizce yok sayılır; modüller yine çalışır, yalnızca ön yükleme avantajı olmaz. Uyumluluk dolgusu gerekmez; en kötü durumda eski tarayıcılarda yükleme biraz daha yavaş olur.
Grafik Boyutunu Sınırlayın
Kullanıcının hiç çalıştırmayabileceği kodlar için yüzlerce modülü önceden yüklemek bant genişliğini boşa harcar. Derinlerdeki gecikmeli yüklenen modüller yerine yalnızca rota düzeyindeki giriş parçalarını önceden yükleyin. Seyrek kullanılan kod yolları için prefetch'e (veya isteğe bağlı içe aktarmaya) güvenin.
Diğer İpuçlarıyla Birleştirme
Aynı head içinde görseller ve yazı tipleri için bunları özgürce bir arada kullanabilirsiniz: üçüncü taraf CDN'leri için preconnect, kritik yazı tipleri için preload, giriş modülleri için modulepreload, sonraki sayfanın varlıkları için prefetch. Bu ipuçları birbirini etkilemez.
Doğrulama
Ağ panelini kontrol edin: modulepreload kullanıldığında ikinci düzey içe aktarmalar, giriş modülüyle neredeyse aynı anda başlayan paralel istekler olarak görünür. Kullanılmadığında ise kademeli görünürler; her istek ancak üst modülün ayrıştırılması tamamlandıktan sonra başlar.
Bilgi Kontrolü
modulepreload, aynı modül dosyasının normal preload işleminden farklı olarak ne yapar?
Özet
modulepreload, giriş modülünü ve içe aktarmalarını çalıştırılmadan önce paralel olarak getirerek ES modülü şelalesini ortadan kaldırır. Bunu <head> içinde erkene yerleştirin, derleme grafiğinden üretin, farklı kaynaklı modüller için crossorigin ayarlayın ve bant genişliğinin boşa harcanmasını önlemek üzere kapsamı rota giriş noktalarıyla sınırlayın.
Sıkça Sorulan Sorular
“Kaynak İpuçları: modulepreload” dersi ücretsiz mi?
Evet — “Kaynak İpuçları: modulepreload” 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.
“Kaynak İpuçları: modulepreload” dersinde ne öğreneceğim?
Daha hızlı JavaScript başlangıcı için ES modüllerini önceden 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 4. dersidir.
“Kaynak İpuçları: modulepreload” 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
- async ve defer Öznitelikleri
- Preload, Prefetch ve Preconnect
- Görsellerde Tembel Yükleme: loading=lazy
- Kaynak İpuçları: modulepreload