Ç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 "Control+Üst Karakter+J" (veya Mac'te "Command+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.
71,2 KB boyutunda JavaScript; basit bir uygulamada birkaç sayıyı sıralamak için kullanılabilir. What gives?
Kaynak kodunda (src/index.js), lodash kitaplığı içe aktarılıp bu uygulamada kullanılıyor. Lodash birçok faydalı yardımcı program işlevi sağlar ancak burada paketteki yalnızca tek bir yöntem kullanılmaktadır.
Yalnızca küçük bir kısmının kullanıldığı üçüncü taraf bağımlılıklarını tamamen yükleyip içe aktarmak yaygın bir hatadır.
Optimize etme
Paket boyutunu küçültmenin birkaç yolu vardır:
- Üçüncü taraf kitaplığını içe aktarmak yerine özel bir sıralama yöntemi yazın
- 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. Herhangi bir kodlama eğiticisinde olduğu gibi, kodu kopyalayıp yapıştırmak yerine daima kendiniz yazmaya çalışın.
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.
İlk olarak, bu bağımlılığı package.json içinde 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 uygulama için, çok az çalışmayla paket boyutu 4 kattan fazla küçültülmüştür ancak daha fazla iyileştirme yapılabilir.
Kod bölme
webpack, günümüzde kullanılan en popüler açık kaynaklı modül paketleyicilerden 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çili 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. Taahhüt 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 geç yüklerken ağ bağlantıları 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ızdaki geç yükleme üçüncü taraf bağımlılıkları için her zaman en iyi yaklaşım değildir ve bunları 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'in bunu yapmanıza nasıl yardımcı olabileceğiyle ilgili 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 kısmında veya cihaz görüntü alanının dışında bulunanları geç yüklemek web sitesini hızlandırabilir. Bu konu hakkında daha fazla bilgi edinmek için Lazysizes kılavuzunu inceleyin.