Çoğu web sayfası ve uygulama birçok farklı bölümden oluşur. Uygulamayı oluşturan tüm JavaScript'i ilk sayfa yüklenir yüklenmez göndermek yerine JavaScript'i birden fazla parçaya bölmek sayfa performansını artırır.
Bu codelab'de, üç 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, herhangi bir optimizasyon eklemeden önce web sitesinin ne kadar iyi performans gösterdiğini ölçmek önemlidir.
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a
basın. - Geliştirici Araçları'nı açmak için "Control+Shift+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 seçin.
- Uygulamayı yeniden yükleyin.
Basit bir uygulamada birkaç numarayı sıralamak için 71,2 KB boyutunda JavaScript. What gives?
Kaynak kodunda (src/index.js) lodash kitaplığı içe aktarılır ve bu uygulamada kullanılır. Lodash birçok yararlı yardımcı program işlevi sağlar, ancak burada paketten 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ın tamamını yüklemek ve içe aktarmak yaygın yapılan bir hatadır.
Optimize etme
Paket boyutunu birkaç şekilde kırpabilirsiniz:
- Üçü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 - Tüm kitaplığı değil, yalnızca
lodashkaynağındansortByyöntemini içe aktarın - Sıralama için yalnızca kullanıcı düğmeyi tıkladığında kodu indirin
1. ve 2. seçenek, paket boyutunu küçültmek için son derece uygun yöntemlerdir (ve büyük olasılıkla gerçek bir uygulama için en mantıklı seçenektir). Ancak bunlar bu eğiticide öğretmek amacıyla kullanılmamaktadır 😈.
3. ve 4. seçeneklerin ikisi de 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. Tüm kodlama eğitimlerinde olduğu gibi, kodu kopyalayıp yapıştırmak yerine her zaman kendiniz yazmaya çalışın.
Yalnızca ihtiyacınız olanları içe aktarın
lodash öğesinden yalnızca tek yöntemi içe aktarmak için birkaç dosyanın değiştirilmesi gerekiyor.
Başlamak için package.json öğesinde bu bağımlılığı değiştirin:
"lodash": "^4.7.0",
Bununla birlikte:
"lodash.sortby": "^4.7.0",
Şimdi src/index.js'da şu modülü içe aktarın:
import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";
Ve değerlerin sıralanma şeklini 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 bir kez daha göz atın.
Bu uygulama için paket boyutu çok az bir çalışmayla 4 kattan fazla küçültülmüştür ancak daha fazla iyileştirme yapılabilir.
Kod bölme
webpack, bugün 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 okunabilecek statik dosyalar halinde gruplandırır.
Bu uygulamada kullanılan tek paket iki ayrı parçaya ayrılabilir:
- İlk rotamızı oluşturan koddan sorumlu olan
- Sıralama kodumuzu içeren ikincil bir yığın
Dinamik içe aktarma kullanıldığında, ikincil parça geç yüklenebilir veya istek üzerine 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 aktarmayı kaldırarak başlayın:
import sortBy from "lodash.sortby";
Düğmeye basıldığında tetiklenen etkinlik işleyicinin içine 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 yeteneğini içeren bir teklifin (şu anda TC39 sürecinin 3. aşamasındadır) parçasıdır. Webpack, bunun için zaten destek içerir ve teklifte belirtilen söz dizimini uygular.
import() bir vaat döndürür ve sorun çözüldüğünde seçili modül ayrı bir parçaya bölünür. Modül döndürüldükten sonra, lodash tarafından sağlanan varsayılan dışa aktarıma referans vermek için module.default kullanılır. Vaat, üç giriş değerini sıralamak için sortInput yöntemi çağıran başka bir .then ile zincirlenir. Söz verme zincirinin sonundacatch(), taahhütünün bir hata nedeniyle reddedildiği durumları ele almak için kullanılır.
Yapılması gereken son şey, dosyanın sonuna sortInput yöntemini yazmaktır. Bunun, lodash.sortBy kaynağından içe aktarılan yöntemi alan bir işlevi döndüren bir işlev olması gerekir. Böylece iç içe geçmiş işlev, üç giriş değerini sıralayıp 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>
`
};
}
İzleme
Uygulamayı son bir kez daha yükleyin ve Ağ panelini tekrar yakından inceleyin. Uygulama yüklenir yüklenmez yalnızca küçük bir başlangıç paketi indirilir.
Giriş numaralarını sıralamak için düğmeye basıldıktan sonra, sıralama kodunu içeren yığın getirilir ve yürütülür.
Sayıların nasıl sıralandığına dikkat edin!
Sonuç
Kod bölme ve geç yükleme, uygulamanızın ilk paket boyutunu küçültmek için son derece yararlı teknikler olabilir ve bu da doğrudan sayfa yüklenme sürelerinin çok daha kısa olmasını sağlayabilir. Ancak bu optimizasyonu uygulamanıza dahil etmeden önce dikkate almanız gereken bazı önemli noktalar vardır.
Geç yükleme kullanıcı arayüzü
Belirli kod modüllerini geç yüklerken, ağ bağlantıları daha zayıf olan kullanıcılar için bu deneyimin nasıl olacağını dikkate almak ö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österebilirsiniz.
Üçüncü taraf düğüm modülleri geç yükleniyor
Bu, uygulamanızda üçüncü taraf bağımlılıklarını geç yükleme konusunda her zaman en iyi yaklaşım değildir ve bu bağımlılıkları nerede kullandığınıza bağlıdır. Genellikle üçüncü taraf bağımlılıkları, çok sık güncellenmedikleri için önbelleğe alınabilen ayrı bir vendor paketine bölünür. SplitChunksPlugin'in bunu yapmanıza 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 aktarmalardan ziyade geç yüklemeyi kolaylaştırmak için soyutlamalar sağlar.
Dinamik içe aktarmaların işleyiş şeklini anlamak yararlı olsa da belirli modülleri geç 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 erken yüklemeyi denemek için <link rel="preload"> veya <link rel="prefetch"> gibi tarayıcı ipuçlarından yararlanın. Webpack, içe aktarma ifadelerinde sihirli yorumlar kullanarak her iki ipucunu da destekler. Bu konu, Kritik parçaları önceden yükleme kılavuzunda daha ayrıntılı bir şekilde açıklanmıştır.
Koddan daha fazlasını yükleme geç yükleme
Görseller, bir uygulamanın önemli bir kısmını oluşturabilir. Ekranın alt kısmında veya cihaz görüntü alanının dışında olanları geç yüklemek bir web sitesini hızlandırabilir. Geç boyutlar kılavuzundan bu konu hakkında daha fazla bilgi edinebilirsiniz.