Modül tabanlı geliştirme, önbelleğe alınabilirlik, Google Analytics 4'ün Bu sayede kullanıcılarınıza göndermeniz gereken bayt sayısını azaltabilirsiniz. Kodun daha hassas ayrıntı düzeyi ayrıca yükleme hikayesine yardımcı olur. uygulamanızdaki kritik koda öncelik verme.
Ancak, modül bağımlılıkları tarayıcının belirli bir zamanda bağımlılarının ne olduğunu öğrenmeden önce modülün yüklenmesini bekler. Tek yön sağlamak, bağımlılıkları önceden yüklemektir. Böylece, tarayıcı sayesinde bu nedenle internet bağlantınız olmayabilir.
<link rel="preload">
<link rel="preload">
kaynakları önceden bildirerek
istekte bulunmanın bir yoludur.
yardımcı olması gerekir.
<head>
<link rel="preload" as="style" href="critical-styles.css">
<link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>
Bu yöntem, özellikle de gizlenmiş yazı tipleri gibi kaynaklarda işe yarar. içinde, bazen birkaç seviye derinliğinde olur. Bu durumda, tarayıcı aşamaya geçmeden önce bir kerede birkaç gidiş dönüş büyük yazı tipi dosyası getirildiğinde, indirme işlemini başlatmak için o zamanı kullanabilir ve tam bağlantı bant genişliğinden yararlanın.
<link rel="preload">
ve HTTP üst bilgisi eşdeğeri, basit ve bildirim amaçlı bir
ihtiyaç duyacakları önemli dosyaları doğrudan tarayıcıya bildirmenin bir yoludur.
Google Trendler'i kullanabilirsiniz. Tarayıcı önceden yüklemeyi gördüğünde, yüksek bir
kaynak için öncelikli indirmedir. Böylece ihtiyaç duyulduğunda
önceden getirildiğini görebiliriz. Ancak modüllerde çalışmaz.
<link rel="preload">
neden modüllerde çalışmıyor?
Burada işler zorlaşıyor. Birkaç kimlik bilgisi modu vardır: bir önbellek isabeti alabilmeniz için bunların eşleşmesi gerekir, aksi halde iki kez getirmesi gerekir. Elbette çift getirmek kötü bir şeydir çünkü kullanıcının bant genişliğini boşa harcar ve daha uzun süre beklemesine neden olur. Bu, sizin için geçerli bir neden değildir.
<script>
ve <link>
etiketleri için kimlik bilgisi modunu crossorigin
ile ayarlayabilirsiniz
özelliğini gönderin. Ancak, hiçbir anahtar içermeyen <script type="module">
crossorigin
özelliği, mevcut olmayan omit
kimlik bilgisi modunu belirtiyor
(<link rel="preload">
için). Bu durumda elbette
hem <script>
hem de <link>
içindeki crossorigin
özelliğini birle değiştirin
diğer değerlerden farklıdır, çünkü bunu göz önünde bulundurursanız bunu yapmanın
diğer modüllerin bağımlılığıdır.
Ayrıca, dosya getirmek, kodu çalıştırmanın yalnızca ilk adımıdır.
İlk olarak, tarayıcının dosyayı ayrıştırıp derlemesi gerekir. İdeal koşullarda
Bu işlem de önceden yapılmalıdır. Böylece, modüle ihtiyaç duyulduğunda kod,
hazır olduğundan emin olun. Ancak, V8 (Chrome'un JavaScript motoru) modülleri ayrıştırır ve derler
farklı bir şey yapmanızı sağlar. <link rel="preload">
yapmıyor
Yüklenmekte olan dosyanın bir modül olduğunu, yani tüm tarayıcının
dosyayı yükleyip önbelleğe almaktır. Komut dosyası
<script type="module">
etiketi (veya başka bir modül tarafından yüklendiğinde) tarayıcı
ve kodu bir JavaScript modülü olarak derler.
Peki, <link rel="modulepreload">
, modüller için yalnızca <link rel="preload">
mi?
Özetle, evet. Modülleri önceden yüklemek için belirli bir link
türüne sahip olduğumuzda
basit HTML'ler yazmanızı sağlar. İlgili içeriği oluşturmak için kullanılan
varsayılan ayarlarla çalışır.
<head>
<link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">
Tarayıcı artık önceden yüklediğiniz şeyin bir modül olduğunu bileceği için, getirme işlemini tamamladığında beklemek yerine modülü ayrıştırıp derleyin. çalıştırmaya çalışana kadar.
Peki, modüllerin nasıl belirlersiniz?
Komik olmalı! Bu makalede gerçekten de ele alınmayan bir konu var: yineleme.
<link rel="modulepreload">
spesifikasyonu isteğe bağlı olarak yalnızca
ve tüm bağımlılık ağacını içerir. Tarayıcıların
ya da yapabilirler.
O halde bir modülü ve onun özelliklerini önceden yüklemek için tarayıcılar arası en iyi çözüm nedir? Peki, uygulamayı çalıştırmak için tam bağımlılık ağacına ihtiyacınız olacak.
Bağımlılıkları yinelemeli olarak önceden yüklemeyi seçen tarayıcılar, sağlam bir tekilleştirmeye sahip olmalıdır. Bu nedenle, genel olarak en iyi uygulama, modülü ve düz listeyi ve tarayıcının aynı modülü iki kez getirmeyeceğinden emin olun.
<head>
<!-- dog.js imports dog-head.js, which in turn imports
dog-head-mouth.js, which imports dog-head-mouth-tongue.js. -->
<link rel="modulepreload" href="dog-head-mouth-tongue.mjs">
<link rel="modulepreload" href="dog-head-mouth.mjs">
<link rel="modulepreload" href="dog-head.mjs">
<link rel="modulepreload" href="dog.mjs">
</head>
Modüllerin önceden yüklenmesi performansı artırır mı?
Önceden yükleme, tarayıcıya ne olduğunu söyleyerek bant genişliği kullanımını en üst düzeye çıkarmaya yardımcı olabilir bu uzun gidiş dönüşlerde yapılacak bir şeyle takılmaması için getirilmelidir. Modüllerle denemeler yapıyor ve derin dönüşümler nedeniyle performans sorunlarıyla karşılaşıyorsanız önceden yüklemelerden oluşan düz bir liste oluşturmak kesinlikle işe yarayabilir.
Bununla birlikte, modül performansı üzerinde hâlâ çalışılıyor. Bu nedenle Geliştirici Araçları'nı kullanarak uygulamanızda neler olduğuna yakından bakacak ve bu arada uygulamanızı birkaç parçalara bölmeyi düşünebilirsiniz. Bir sürü devam etmekte olan bir modülün çalışmadığından emin olmak için hak ettikleri dinlenmeyi paylaştırırlar.