Modülleri önceden yükleyin

Sérgio Gomes
X

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"> 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>

Tarayıcı Desteği

  • Chrome: 50..
  • Kenar: ≤79..
  • Firefox: 85..
  • Safari: 11.1.

Kaynak

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.

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.

Ö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.

Tarayıcı Desteği

  • Chrome: 66..
  • Kenar: ≤79..
  • Firefox: 115..
  • Safari: 17..

Kaynak

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.