Kod bölmeyle JavaScript yüklerini azaltın

Houssein Djirdeh
Houssein Djirdeh
X GitHub Ana sayfa
Jeremy Wagner

Kimse beklemeyi sevmez. Kullanıcıların% 50'den fazlası, yüklenmesi 3 saniyeden uzun süren web sitelerini terk ediyor.

Büyük JavaScript yükleri göndermek, sitenizin hızını önemli ölçüde etkiler. Uygulamanızın ilk sayfası yüklendiği anda tüm JavaScript'i kullanıcınıza göndermek yerine paketinizi birden fazla parçaya bölün ve en başta yalnızca gerekli olanları gönderin.

Kod bölme neden faydalıdır?

Kod bölme, başlangıç süresini en aza indirmeyi amaçlayan bir tekniktir. Başlangıçta daha az JavaScript gönderdiğimizde, bu kritik dönemde ana iş parçacığı işini en aza indirerek uygulamaların daha hızlı etkileşimli olmasını sağlayabiliriz.

Core Web Vitals söz konusu olduğunda, başlangıçta indirilen JavaScript yüklerini azaltmak daha iyi Interaction to Next Paint (INP) sürelerine katkıda bulunur. Bunun nedeni, ana iş parçacığını serbest bırakarak uygulamanın JavaScript ayrıştırma, derleme ve yürütmeyle ilgili başlangıç maliyetlerini düşürmesi ve böylece kullanıcı girişlerine daha hızlı yanıt verebilmesidir.

Web sitenizin mimarisine bağlı olarak (özellikle web sitenizde istemci tarafında oluşturma yoğun olarak kullanılıyorsa) işaretlemeyi oluşturmaktan sorumlu JavaScript yüklerinin boyutunu küçültmek, Largest Contentful Paint (LCP) sürelerinin iyileşmesine yol açabilir. Bu durum, LCP kaynağı istemci tarafı işaretleme tamamlanana kadar tarayıcı tarafından keşfedilmekte geciktiğinde veya ana iş parçacığı LCP öğesini oluşturamayacak kadar meşgul olduğunda meydana gelebilir. Her iki senaryo da sayfanın LCP süresini geciktirebilir.

Ölçüm

Bir sayfadaki tüm JavaScript'lerin yürütülmesi önemli ölçüde zaman aldığında Lighthouse, başarısız bir denetim gösterir.

Komut dosyalarının yürütülmesinin çok uzun sürdüğünü gösteren başarısız bir Lighthouse denetimi.

JavaScript paketini bölerek kullanıcı bir uygulamayı yüklediğinde yalnızca ilk rota için gereken kodu gönderin. Bu, ayrıştırılması ve derlenmesi gereken komut dosyası miktarını en aza indirerek sayfa yükleme sürelerinin kısalmasını sağlar.

webpack, Parcel ve Rollup gibi popüler modül paketleyiciler, dinamik içe aktarmaları kullanarak paketlerinizi bölmenize olanak tanır. Örneğin, bir form gönderildiğinde tetiklenen someFunction yönteminin örneğini gösteren aşağıdaki kod snippet'ini inceleyin.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

Burada, someFunction belirli bir kitaplıktan içe aktarılan bir modülü kullanıyor. Bu modül başka bir yerde kullanılmıyorsa kod bloğu, yalnızca kullanıcı formu gönderdiğinde getirmek için dinamik içe aktarma kullanacak şekilde değiştirilebilir.

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

Modülü oluşturan kod, ilk pakete dahil edilmez ve artık geç yüklenir veya kullanıcıya yalnızca form gönderildikten sonra ihtiyaç duyulduğunda sağlanır. Sayfa performansını daha da artırmak için önemli parçaları önceden yükleyerek öncelik verin ve daha hızlı getirin.

Önceki kod snippet'i basit bir örnek olsa da üçüncü taraf bağımlılıklarını geç yükleme, daha büyük uygulamalarda yaygın bir model değildir. Genellikle üçüncü taraf bağımlılıkları, ayrı bir tedarikçi paketine bölünür. Bu paket, çok sık güncellenmediği için önbelleğe alınabilir. SplitChunksPlugin'in bu konuda nasıl yardımcı olabileceği hakkında daha fazla bilgi edinebilirsiniz.

İstemci taraflı bir çerçeve kullanırken rotada veya bileşen düzeyinde bölme, uygulamanızın farklı bölümlerini geç yüklemek için daha basit bir yaklaşımdır. Webpack kullanan birçok popüler çerçeve, yapılandırmalara kendiniz girmenize gerek kalmadan geç yüklemeyi kolaylaştırmak için soyutlamalar sağlar.