Beklemeyi kimse sevmez. Kullanıcıların% 50'den fazlası, yüklenmesi 3 saniyeden uzun süren web sitelerini terk ediyor.
Büyük JavaScript yüklerinin gönderilmesi sitenizin hızını önemli ölçüde etkiler. Uygulamanızın ilk sayfası yüklenir yüklenmez tüm JavaScript'i kullanıcıya göndermek yerine paketi birden fazla parçaya bölün ve yalnızca en başta gerekli olanı gönderin.
Kod bölme neden yararlıdır?
Kod bölme, başlatma 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ığı çalışmasını en aza indirerek uygulamaların daha hızlı etkileşimli olmasını sağlayabiliriz.
Önemli Web Verileri söz konusu olduğunda başlangıçta indirilen JavaScript yüklerinin azaltılması, First Input Delay (FID) ve Sonraki Boyamayla Etkileşim (INP) sürelerinin artmasına katkıda bulunur. Bunun nedeni, uygulamanın JavaScript ayrıştırma, derleme ve yürütmeyle ilgili başlatma maliyetlerini azaltarak ana iş parçacığını serbest bırakarak kullanıcı girişlerine daha hızlı yanıt verebilmesidir.
Web sitenizin mimarisine bağlı olarak (özellikle web siteniz büyük ölçüde istemci tarafında oluşturmaya dayanıyorsa) işaretlemenin oluşturulmasından sorumlu JavaScript yüklerinin boyutunu azaltmak, Largest Contentful Paint (LCP) sürelerinin iyileştirilmesini sağlayabilir. Bu durum, LCP kaynağının istemci tarafı işaretleme tamamlanana kadar tarayıcı tarafından keşfedilmesinde gecikme olduğunda veya ana iş parçacığı bu LCP öğesini oluşturamayacak kadar meşgul olduğunda ortaya çıkabilir. Her iki senaryo da sayfanın LCP süresini geciktirebilir.
Ölçüm
Lighthouse, bir sayfadaki tüm JavaScript'in yürütülmesi için önemli bir süre geçtiğinde başarısız bir denetim görüntüler.
Kullanıcı bir uygulamayı yüklediğinde yalnızca ilk rota için gereken kodu göndermek için JavaScript paketini bölün. Bu, ayrıştırılması ve derlenmesi gereken komut dosyası miktarını en aza indirerek sayfa yükleme sürelerinin daha hızlı olmasını sağlar.
webpack, Parcel ve Rollup gibi popüler modül paketleyiciler, paketlerinizi dinamik içe aktarmaları kullanarak bölmenize olanak tanır.
Örneğin, bir form gönderildiğinde tetiklenen someFunction yöntemi örneğini gösteren aşağıdaki kod snippet'ini düşünün.
import moduleA from "library";
form.addEventListener("submit", e => {
e.preventDefault();
someFunction();
});
const someFunction = () => {
// uses moduleA
}
someFunction burada belirli bir kitaplıktan içe aktarılmış bir modül kullanır. Bu modül başka bir yerde kullanılmıyorsa kod bloğu, yalnızca form kullanıcı tarafından gönderildiğinde dinamik içe aktarma kullanılarak getirilmesi için 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 yalnızca form gönderildikten sonra gerekli olduğunda kullanıcıya sağlanır. Sayfa performansını daha da iyileştirmek için kritik parçaları öncelik sırasına koyup daha erken getirmek için bunları önceden yükleyin.
Önceki kod snippet'i basit bir örnek olsa da üçüncü taraf bağımlılıklarını geç yükleme büyük uygulamalarda yaygın bir kalıp değildir. Genellikle üçüncü taraf bağımlılıkları, çok sık güncellenmedikleri için önbelleğe alınabilen ayrı bir tedarikçi paketine bölünür. SplitChunksPlugin'in bunu yapmanıza nasıl yardımcı olabileceği hakkında daha fazla bilgi edinebilirsiniz.
İstemci tarafı çerçeve kullanırken rota veya bileşen düzeyinde bölme yapmak, 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, geç yüklemeyi yapılandırmaları kendi kendinize incelemekten daha kolay hale getirmek için soyutlamalar sağlar.