Çoğu web sayfası ve uygulama birçok farklı bölümden oluşur. Şunun yerine: uygulamayı oluşturan tüm JavaScript'i, gönderdikleri ilk sayfa yüklendiğinde, JavaScript kodu birden fazla parçaya bölünüyor sayfa performansını artırır.
Bu codelab'de, bir uygulamanızın performansını artırmak için kod bölmenin nasıl kullanılacağı basit bir uygulamadır.
Ölçüm
Her zaman olduğu gibi, web sitenizin ne kadar iyi performans gösterdiğini olduğunu fark edebilirsiniz.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından,
Tam ekran
.
- 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 seçin.
- 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ır ve kullanılır
bu uygulamada. Lodash, pek çok faydalı fayda sağlar
işlevleridir, ancak burada paketten yalnızca tek bir yöntem kullanılmaktadır.
Yalnızca küçük bir kısmıyla üçüncü taraf bağımlılıklarının tamamını yüklemek ve içe aktarmak
bir kısmın kullanılıp kullanılmadığını görmek yaygın 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ıralama yapmak için yerleşik
Array.prototype.sort()
yöntemini kullanın - Tüm kitaplığı değil, yalnızca
lodash
kaynağındansortBy
yöntemini içe aktar - Sıralama için kodu yalnızca kullanıcı düğmeyi tıkladığında indir
1 ve 2. seçenek paket boyutunu küçültmek (ve büyük olasılıkla gerçek bir uygulama için daha mantıklı olacaktır). Ancak bunlar, bu eğitimde öğretmek amacıyla kullanılmaz 😈.
Hem 3 hem de 4. seçenek bu uygulamanın performansının iyileştirilmesine yardımcı olur. İlgili içeriği oluşturmak için kullanılan bu codelab'in sonraki birkaç bölümünde bu adımlar ele alınmaktadır. Tüm kodlamalar gibi kodu kopyalayıp yapıştırmak yerine her zaman kendiniz yazmaya çalışın.
Yalnızca ihtiyaç duyduklarınızı içe aktarın
lodash
kaynağından yalnızca tek bir yöntem içe aktarılacak şekilde birkaç dosyanın değiştirilmesi gerekiyor.
İlk olarak, bu bağımlılığı package.json
içinde değiştirin:
"lodash": "^4.7.0",
şununla yap:
"lodash.sortby": "^4.7.0",
Şimdi src/index.js
üzerinde şu modülü içe aktarın:
import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";
Ayrıca değerlerin nasıl sıralandığı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 göz atın bir kez daha gönderin.
Bu uygulama için, paket boyutu 4 kattan fazla küçültüldü. ancak daha fazla iyileştirme yapılabilir.
Kod bölme
webpack, internetteki en popüler açık kaynak bugün kullanılan modül paketleyicilerin sayısı. Kısacası, tüm JavaScript modüllerini gruplandırır statik dosyalara dönüştüren bir web uygulamasını oluşturan tarafından okunmasına izin verilmez.
Bu uygulamada kullanılan tek paket, iki ayrı pakete ayrılabilir. parçalar:
- İlk rotamızı oluşturan koddan sorumlu bir kişi
- Sıralama kodumuzu içeren ikincil yığın
Dinamik içe aktarma kullanıldığında, ikincil bir yığın geç yüklenebilir veya isteğe bağlı olarak yüklenir. Bu uygulamada, parçayı oluşturan kod yalnızca kullanıcı düğmeye bastığında yüklenir.
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";
Ayrıca, düğmeyi düğmeye basıldığında tetiklenen etkinlik işleyiciye aktarın:
form.addEventListener("submit", e => {
e.preventDefault();
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
import()
özelliği,
teklif (şu anda bu aşamada)
3. TC39 işlemi) ekleyebilirsiniz.
webpack zaten bunun için destek içeriyor ve
kabul edersiniz.
import()
, bir vaat döndürür ve bu taahhüt çözüme kavuşturulduğunda seçili
modülü sağlanır. Modül hakkında
döndürüldüğünde, varsayılan değere başvuruda bulunmak için module.default
kullanılır
lodash tarafından sağlanan dışa aktarım. Söz konusu taahhüt, başka bir .then
ile ilişkilidir.
üç giriş değerini sıralamak için bir sortInput
yöntemini çağırır. Bu
taahhüt zinciri, .catch()
, sözün reddedildiği durumları ele almak için kullanılır
neden olabilir.
Yapılması gereken son işlem, sortInput
yöntemini
dosyanın sonuna eklenir. Bunun, şunu döndüren bir işlev olması gerekir:
lodash.sortBy
kaynağından içe aktarılan yöntemi alır. İç içe yerleştirilmiş işlev,
giriş değerini sıralayıp DOM'yi güncelleyin.
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 yeniden yükleyin ve Ağ'ı yakından takip edin. tekrar kontrol edin. Uygulama indirildikten sonra yalnızca küçük bir başlangıç paketi indirilir. yükler.
Giriş numaralarını sıralamak için düğmeye basıldıktan sonra, sıralama kodu getirilir ve yürütülür.
Sayıların hâlâ nasıl sıralandığına dikkat edin.
Sonuç
Kod bölme ve geç yükleme, videoyu kırpmak için son derece yararlı teknikler olabilir. uygulamanızın başlangıç paket boyutunu değiştirin. Bu da doğrudan çok daha hızlı sayfa yüklenme sürelerine neden olur. Ancak bilmeniz gereken önemli şeyler var. göz önünde bulundurmanız gerekir.
Kullanıcı arayüzü geç yükleme
Belirli kod modüllerini geç yükleme işlemi sırasında, daha zayıf ağ bağlantıları olan kullanıcılara yönelik olacaktır. Yarma ve bir kullanıcı bir işlem gönderdiğinde çok büyük bir kod parçası yüklemek, uygulama çalışmayı durdurmuş gibi görünebilir; bu nedenle, bir tür yükleme göstergesidir.
Üçü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 onları nerede kullandığınıza göre
değişir. Genellikle, üçüncü taraf
bağımlılıklar, önbelleğe alınabilen ayrı bir vendor
paketine ayrılır.
bunlar da sık güncellenmez. Google Ads'in
SplitChunksPlugin
bunda size yardımcı olacaktır.
JavaScript çerçevesiyle geç yükleme
Webpack kullanan birçok popüler çerçeve ve kitaplık, dinamik içe aktarmaları kullanmaya kıyasla geç yüklemeyi bir uygulamadır.
Dinamik içe aktarmaların işleyiş şeklini anlamak yararlı olsa da her zaman yöntemini kullanmanızı öneririz.
Önceden yükleme ve önceden getirme
Mümkün olduğunda <link rel="preload">
gibi tarayıcı ipuçlarından yararlanın.
veya <link rel="prefetch">
kullanarak önemli modülleri yüklemeyi deneyebilirsiniz
gerekir. webpack, içe aktarma sırasında sihirli yorumları kullanarak her iki ipucunu da destekler
açıklamalarına dikkat edin. Bu,
Kritik parçaları önceden yükleme rehberi.
Koddan daha fazla geç yükleme
Resimler bir uygulamanın önemli bir kısmını oluşturabilir. Şu olanları geç yüklemek olması web sitesini hızlandırabilir. Okunanlar bu konu hakkında daha fazla Lazysizes kılavuzu.