Kimse beklemekten hoşlanmaz. 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ı etkiler önemli ölçüde artış gösteriyor. Kullanıcınıza tüm JavaScript'i en kısa sürede göndermek yerine uygulamanızın ilk sayfası yüklendiğinden paketinizi ve sadece gerekenleri en başta 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önem boyunca ana iş parçacığı işini en aza indirerek uygulamaların daha hızlı etkileşim kurmasını sağlayabiliriz.
Önemli Web Verileri söz konusu olduğunda, başlangıçta indirilen JavaScript yüklerinin azaltılması Sonraki Boyamayla Etkileşim (INP) sürelerinin daha iyi olmasını sağlar. Bunun nedeni, ana iş parçacığını serbest bırakarak uygulamanın JavaScript ayrıştırma, derleme ve yürütmeyle ilgili başlatma maliyetlerini azaltarak kullanıcı girişlerine daha hızlı yanıt verebilmesidir.
Web sitenizin mimarisine bağlı olarak (özellikle de web siteniz yoğun bir şekilde istemci taraflı oluşturmaya dayanıyorsa) işaretlemeyi oluşturmaktan sorumlu JavaScript yüklerinin boyutunu azaltmak Largest Contentful Paint (LCP) sürelerinin iyileşmesini sağlayabilir. Bu durum, LCP kaynağının istemci tarafı işaretleme tamamlanıncaya kadar tarayıcı tarafından keşfedilmesinde geciktiğinde veya ana iş parçacığı söz konusu LCP öğesini oluşturamayacak kadar meşgul olduğunda ortaya çıkabilir. Her iki senaryo da sayfanın LCP süresini geciktirebilir.
Ölçüm
Lighthouse, incelemenin tamamlanması için önemli miktarda zaman geçtiğinde, bir sayfadaki tüm JavaScript'i çalıştırmaktır.
JavaScript paketini yalnızca kullanıcı bir uygulama yükler. Bu, kullanılması gereken komut dosyası miktarını en aza ayrıştırılır ve bu sayede sayfa yüklenme süreleri hızlanır.
webpack gibi popüler modül paketleyiciler,
Parsel ve
Toplayıcı, verilerinizi bölmenize olanak tanır.
dinamik içe aktarmaları kullanan paketler.
Örneğin, bir örnek içeren aşağıdaki kod snippet'ini
Bir form gönderildiğinde tetiklenen someFunction yöntemi.
import moduleA from "library";
form.addEventListener("submit", e => {
e.preventDefault();
someFunction();
});
const someFunction = () => {
// uses moduleA
}
someFunction burada belirli bir kitaplıktan içe aktarılan bir modülü kullanır. Eğer
kod bloğu başka bir yerde kullanılmıyorsa, kod bloğunun
dinamik içe aktarma özelliğini kullanabilirsiniz.
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üklendi veya kullanıcıya yalnızca gerektiğinde geri dönelim. Sayfa performansını daha da iyileştirmek için kritik parçaları önceden yükleyerek daha erken yükleyin.
Önceki kod snippet'i basit bir örnek olsa da üçüncü tarafları geç yükleme daha büyük uygulamalarda kullanılan bir kalıp değildir. Genellikle, üçüncü taraf bağımlılıkları önbelleğe alınabilen ayrı bir tedarikçi firma paketine bölünür çünkü çok sık güncellenmezler. Web sitemiz g.co/newsinitiative üzerinden SplitChunksPlugin bunda size yardımcı olacaktır.
İstemci tarafı çerçevesi kullanılırken rota veya bileşen düzeyinde bölme uygulamanızın farklı bölümlerini geç yüklemek için daha basit bir yaklaşım. Birçok webpack kullanan popüler çerçeveler, geç yükleme yapmak için soyutlamalar sağlar çok daha kolaydır.