Çoğu web sayfası ve uygulama birçok farklı bölümden oluşur. Uygulamayı oluşturan tüm JavaScript'i ilk sayfa yüklendikten hemen sonra göndermek yerine JavaScript'i birden fazla parçaya bölmek sayfa performansını artırır.
Bu kod laboratuvarında, üç sayıyı sıralayan basit bir uygulamanın performansını artırmak için kod bölme özelliğinin nasıl kullanılacağı gösterilmektedir.
Ölçüm
Her zaman olduğu gibi, optimizasyon eklemeye çalışmadan önce bir web sitesinin ne kadar iyi performans gösterdiğini ölçmek önemlidir.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a
basın. - Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Önbelleği devre dışı bırak onay kutusunu işaretleyin.
- Uygulamayı yeniden yükleyin.
Basit bir uygulamada birkaç sayıyı sıralamak için 71,2 KB'lık JavaScript. What gives?
Kaynak kodunda (src/index.js), lodash kitaplığı içe aktarılır ve bu uygulamada kullanılır. Lodash birçok faydalı yardımcı program işlevi sağlar ancak burada paketteki yalnızca tek bir yöntem kullanılmaktadır.
Üçüncü taraf bağımlılıklarının yalnızca küçük bir kısmının kullanıldığı durumlarda tümünü yüklemek ve içe aktarmak yaygın bir hatadır.
Optimize etme
Paket boyutunu küçültmenin birkaç yolu vardır:
- Üçüncü taraf kitaplığı içe aktarmak yerine özel bir sıralama yöntemi yazma
- Sayısal olarak sıralamak için yerleşik
Array.prototype.sort()yöntemini kullanın - Kitaplığın tamamını değil, yalnızca
lodashiçindekisortByyöntemini içe aktarma - Sıralama kodunu yalnızca kullanıcı düğmeyi tıkladığında indirin
1. ve 2. seçenekler, paket boyutunu küçültmek için mükemmel yöntemlerdir (ve gerçek bir uygulama için muhtemelen en mantıklı seçeneklerdir). Ancak bu eğitimde, öğretme amacıyla bu yöntemler kullanılmamıştır 😈.
Hem 3. hem de 4. seçenekler bu uygulamanın performansını iyileştirmeye yardımcı olur. Bu codelab'in sonraki birkaç bölümünde bu adımlar ele alınmaktadır. Her kodlama eğitiminde olduğu gibi, kodu kopyalayıp yapıştırmak yerine her zaman kendiniz yazmayı deneyin.
Yalnızca ihtiyacınız olanları içe aktarın
Yalnızca lodash yöntemini içe aktaracak şekilde birkaç dosyanın değiştirilmesi gerekir.
Öncelikle package.json'teki bu bağımlılığı değiştirin:
"lodash": "^4.7.0",
Kaldırdığınız kodun yerine aşağıdakini ekleyin:
"lodash.sortby": "^4.7.0",
Ardından src/index.js'te şu modülü içe aktarın:
import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";
Ardından, değerlerin nasıl sıralanacağını güncelleyin:
form.addEventListener("submit", e => {
e.preventDefault();
const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
const sortedValues = _.sortBy(values);
const sortedValues = sortBy(values);
results.innerHTML = `
<h2>
${sortedValues}
</h2>
`
});
Uygulamayı yeniden yükleyin, Geliştirici Araçları'nı açın ve Ağ paneline tekrar göz atın.
Bu uygulamada, çok az çalışmayla paket boyutu 4 kattan fazla azaltıldı ancak iyileştirmeye açık alanlar hâlâ mevcut.
Kod bölme
webpack, günümüzde kullanılan en popüler açık kaynak modül birleştirme araçlarından biridir. Kısacası, bir web uygulamasını oluşturan tüm JavaScript modüllerini (ve diğer öğeleri) tarayıcı tarafından okunabilen statik dosyalarda paketler.
Bu uygulamada kullanılan tek paket iki ayrı parçaya bölünebilir:
- İlk rotamızı oluşturan koddan sorumlu kişi
- Sıralama kodumuzu içeren ikincil bir parça
Dinamik içe aktarma kullanılarak ikincil bir parça gecikmeli olarak yüklenebilir veya isteğe bağlı olarak yüklenebilir. Bu uygulamada, parçayı oluşturan kod yalnızca kullanıcı düğmeye bastığında yüklenebilir.
src/index.js içindeki sıralama yöntemi için üst düzey içe aktarma işlemini kaldırarak başlayın:
import sortBy from "lodash.sortby";
Ardından, düğmeye basıldığında tetiklenen etkinlik işleyiciye içe aktarın:
form.addEventListener("submit", e => {
e.preventDefault();
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
import() özelliği, bir modülü dinamik olarak içe aktarma özelliğini içerecek bir önerinin (şu anda TC39 sürecinin 3. aşamasında) bir parçasıdır. webpack bu özellik için desteği zaten eklemiştir ve öneride belirtilen aynı söz dizimini kullanır.
import() bir promise döndürür ve çözüldüğünde, seçilen modül sağlanır ve ayrı bir parçaya ayrılır. Modül döndürüldükten sonra lodash tarafından sağlanan varsayılan dışa aktarma işlemine referans vermek için module.default kullanılır. Söz, üç giriş değerini sıralamak için sortInput yöntemini çağıran başka bir .then ile zincirlenir. Promise zincirinin sonunda .catch(), promise'in bir hata nedeniyle reddedildiği durumları işlemek için kullanılır.
Son olarak, dosyanın sonuna sortInput yöntemini yazmanız gerekir. Bu, lodash.sortBy kaynağından içe aktarılan yöntemi alan bir işlevi döndüren bir işlev olmalıdır. İç içe yerleştirilmiş işlev daha sonra üç giriş değerini sıralayabilir ve DOM'u güncelleyebilir.
const sortInput = () => {
return (sortBy) => {
const values = [
input1.valueAsNumber,
input2.valueAsNumber,
input3.valueAsNumber
];
const sortedValues = sortBy(values);
results.innerHTML = `
<h2>
${sortedValues}
</h2>
`
};
}
Gözle
Uygulamayı son bir kez daha yükleyin ve Ağ panelini tekrar yakından izleyin. Uygulama yüklendikten hemen sonra yalnızca küçük bir ilk paket indirilir.
Giriş sayılarını sıralamak için düğmeye basıldığında, sıralama kodunu içeren parça getirilir ve yürütülür.
Sayıların yine de nasıl sıralandığını fark edin.
Sonuç
Kod bölme ve yavaş yükleme, uygulamanızın ilk paket boyutunu küçültmek için son derece yararlı teknikler olabilir. Bu da doğrudan çok daha hızlı sayfa yükleme sürelerine neden olabilir. Ancak bu optimizasyonu uygulamanıza dahil etmeden önce dikkate alınması gereken bazı önemli noktalar vardır.
Kullanıcı arayüzünü geç yükleme
Belirli kod modüllerini yavaş yüklerken, ağ bağlantısı daha zayıf olan kullanıcılar için deneyimin nasıl olacağını göz önünde bulundurmak önemlidir. Kullanıcı bir işlem gönderdiğinde çok büyük bir kod parçasını bölmek ve yüklemek, uygulamanın çalışmayı durdurmuş gibi görünmesine neden olabilir. Bu nedenle, bir tür yükleme göstergesi göstermeyi düşünebilirsiniz.
Üçüncü taraf düğüm modüllerini geç yükleme
Uygulamanızda üçüncü taraf bağımlılıkları yavaş yüklemek her zaman en iyi yaklaşım değildir ve bu, bağımlılıkları nerede kullandığınıza bağlıdır. Üçüncü taraf bağımlılıkları genellikle sık güncellenmedikleri için önbelleğe alınabilen ayrı bir vendor paketine ayrılır. SplitChunksPlugin'ın bu konuda size nasıl yardımcı olabileceği hakkında daha fazla bilgi edinin.
JavaScript çerçevesiyle geç yükleme
Webpack kullanan birçok popüler çerçeve ve kitaplık, uygulamanızın ortasında dinamik içe aktarma kullanmak yerine, gecikmeli yüklemeyi kolaylaştırmak için soyutlama sağlar.
Dinamik içe aktarma işlemlerinin işleyişini anlamak yararlı olsa da belirli modülleri yavaş yüklemek için her zaman çerçeveniz/kitaplığınız tarafından önerilen yöntemi kullanın.
Önceden yükleme ve önceden getirme
Mümkün olduğunda, kritik modülleri daha da erken yüklemeyi denemek için <link rel="preload"> veya <link rel="prefetch"> gibi tarayıcı ipuçlarından yararlanın. webpack, import ifadelerinde sihirli yorumlar kullanarak her iki ipucunu da destekler. Bu konu, Kritik parçaları önceden yükleme kılavuzunda daha ayrıntılı olarak açıklanmaktadır.
Koddan daha fazlasını geç yükleme
Resimler, bir uygulamanın önemli bir bölümünü oluşturabilir. Ekranın altındaki veya cihazın görüntü alanının dışındaki öğeleri geç yüklemek, web sitesinin hızını artırabilir. Bu konu hakkında daha fazla bilgi edinmek için Lazysizes kılavuzunu inceleyin.