Kod bölmeyle JavaScript yüklerini azaltın

Houssein Djirdeh

Ç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 olabileceğini fark ettik.

1. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
2. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
3. Ağ sekmesini tıklayın.
4. Önbelleği devre dışı bırak onay kutusunu seçin.
5. 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:

1. Üçüncü taraf kitaplığını içe aktarmak yerine özel bir sıralama yöntemi yazın
2. Sayısal olarak sıralama yapmak için yerleşik Array.prototype.sort() yöntemini kullanın
3. lodash kaynağından tüm kitaplığı değil yalnızca sortBy yöntemini içe aktar
4. 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.

• Angular ile geç yükleme modülleri
• React Yönlendirici ile kod bölme
• Vue Yönlendirici ile geç yükleme

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.