Modülleri önceden yükleyin

Sérgio Gomes
X

Yayınlanma tarihi: 23 Kasım 2024

Modül tabanlı geliştirme, önbelleğe alınabilirlik açısından bazı gerçek avantajlar sunar ve kullanıcılarınıza göndermeniz gereken bayt sayısını azaltmanıza yardımcı olur. Kodun daha ayrıntılı olması, uygulamanızdaki kritik koda öncelik vermenize olanak tanıyarak yükleme hikayesine de yardımcı olur.

Ancak modül bağımlılıkları, tarayıcının bağımlılıkları ne olduğunu öğrenmeden önce bir modülün yüklenmesini beklemesi gerektiğinden yükleme sorununa yol açar. Bu sorunun üstesinden gelmenin bir yolu, tarayıcı tüm dosyaları önceden bildiği için bağlantıyı meşgul tutarak bağımlılıkları önceden yüklemektir.

<link rel="preload">, tarayıcı ihtiyaç duymadan önce kaynakları önceden açık bir şekilde istemenin bir yoludur.

<head>
  <link rel="preload" as="style" href="critical-styles.css">
  <link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>

Bu özellik, genellikle CSS dosyalarının içinde gizlenen ve bazen birkaç seviye derinlikte olan yazı tipleri gibi kaynaklarda özellikle iyi çalışır. Bu durumda, büyük bir yazı tipi dosyası getirmesi gerektiğini öğrenmeden önce tarayıcının birden fazla gidip gelme işlemini beklemesi gerekir. Bu süreyi indirme işlemini başlatmak ve bağlantı bant genişliğinin tamamından yararlanmak için kullanabilirdi.

<link rel="preload"> ve HTTP üstbilgisi eş değeri, mevcut gezinme kapsamında ihtiyaç duyulacak kritik dosyalar hakkında tarayıcıya hemen bilgi vermenin basit ve açık bir yolunu sağlar. Tarayıcı, ön yüklemeyi gördüğünde kaynak için yüksek öncelikli bir indirme işlemi başlatır. Böylece, gerçekten ihtiyaç duyulduğunda kaynak ya zaten getirilmiş olur ya da kısmen indirilmiş olur. Ancak bu yöntem modüller için çalışmaz.

Burada işler biraz karışır. Kaynaklar için çeşitli kimlik bilgisi modları vardır ve önbelleğe isabet almak için bu modların eşleşmesi gerekir. Aksi takdirde kaynağı iki kez getirirsiniz. Kullanıcının bant genişliğini boşa harcadığı ve iyi bir neden olmadan kullanıcıyı daha uzun süre beklettiği için iki kez getirmenin kötü bir uygulama olduğunu söylemeye gerek yoktur.

<script> ve <link> etiketleri için kimlik bilgisi modunu crossorigin özelliğiyle ayarlayabilirsiniz. Ancak crossorigin özelliği olmayan bir <script type="module"> öğesinin, <link rel="preload"> için var olmayan omit kimlik bilgileri modunu gösterdiği anlaşılıyor. Bu, hem <script> hem de <link> öğenizdeki crossorigin özelliğini diğer değerlerden birine değiştirmeniz gerektiği anlamına gelir. Önyüklemeye çalıştığınız öğe diğer modüllerin bağımlılığıysa bunu kolay bir şekilde yapamazsınız.

Ayrıca, dosyayı getirme işlemi, kodun gerçekten çalıştırılmasının yalnızca ilk adımıdır. Öncelikle tarayıcının kodu ayrıştırması ve derlemesi gerekir. İdeal olarak bu işlem, modüle ihtiyaç duyulduğunda kodun çalışmaya hazır olması için önceden de yapılmalıdır. Ancak V8 (Chrome'un JavaScript motoru), modülleri diğer JavaScript'lerden farklı şekilde ayrıştırır ve derleyebilir. <link rel="preload">, yüklenen dosyanın bir modül olduğunu belirtmek için herhangi bir yöntem sağlamaz. Bu nedenle, tarayıcının tek yapabildiği dosyayı yükleyip önbelleğe koymaktır. Komut dosyası bir <script type="module"> etiketi kullanılarak yüklendikten (veya başka bir modül tarafından yüklendikten) sonra tarayıcı, kodu JavaScript modülü olarak ayrıştırır ve derleyebilir.

Kısaca yanıt vermek gerekirse evet. Modülleri önceden yüklemek için belirli bir link türüne sahip olduğumuzda, hangi kimlik bilgileri modunu kullandığımız konusunda endişelenmeden basit HTML yazabiliriz. Varsayılan değerler işe yarar.

<head>
  <link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">

Tarayıcı artık ön yüklediğiniz şeyin bir modül olduğunu bildiğinden, çalıştırılmaya çalışılana kadar beklemek yerine modülü getirme işlemi tamamlanır tamamlanmaz modülü ayrıştırıp derleyebilir.

Tarayıcı desteği

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

Kaynak

Peki modüllerin bağımlılıkları ne olacak?

Bunu sormanıza sevindik. Bu makalede ele alınmayan bir konu var: yineleme.

<link rel="modulepreload"> spesifikasyonu, isteğe bağlı olarak yalnızca istenen modülü değil, tüm bağımlılık ağacını da yüklemenize olanak tanır. Tarayıcıların bunu yapması gerekmez ancak yapabilir.

Uygulamayı çalıştırmak için bağımlılık ağacının tamamına ihtiyacınız olacağından, bir modülü ve bağımlılık ağacını önceden yüklemek için en iyi tarayıcılar arası çözüm nedir?

Bağımlılıkları yinelemeli olarak ön yüklemeyi seçen tarayıcılarda modüllerin sağlam bir şekilde tekilleştirilmesi gerekir. Bu nedenle, genel olarak en iyi uygulama, modülü ve bağımlılıkları düz listesini beyan etmek ve tarayıcının aynı modülü iki kez getirmeyeceğine güvenmektir.

<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ülleri önceden yüklemek performansa yardımcı olur mu?

Ön yükleme, tarayıcıya neleri getirmesi gerektiğini söyleyerek bant genişliği kullanımını en üst düzeye çıkarmaya yardımcı olabilir. Böylece tarayıcı, bu uzun gidiş dönüşler sırasında hiçbir şey yapmadan beklemez. Modüller üzerinde deneysel çalışmalar yapıyor ve derin bağımlılık ağaçları nedeniyle performans sorunlarıyla karşılaşıyorsanız ön yüklemelerin düz bir listesini oluşturmak kesinlikle yardımcı olabilir.

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 bakın ve bu esnada uygulamanızı birkaç parçaya ayırmayı düşünün. Ancak Chrome'da devam eden birçok modül çalışması var. Bu nedenle, paketleyicilere hak ettikleri dinlenme fırsatını sunmaya yaklaşıyoruz.