JavaScript kodu bölünmesi hakkında bilmeniz gereken tek şey

Modern siteler genellikle tüm javascriptlerini tek, büyük bir şekilde birleştirir. main.js senaryo. Bu, kullanıcıların yalnızca görüntülendikleri sayfa için küçük bir kısmına ihtiyaç duysa bile, tüm sayfalarınız veya rotalarınız için komut dosyalarını içerir.

Javascript bu şekilde servis edildiğinde, web sayfalarınızın yükleme performansı acı çekebilir - özellikle Duyarlı Web Tasarımı mobil cihazlarda. Öyleyse, JavaScript kodu bölünmesini uygulayarak düzeltelim.

• Daha hızlı kod yapılır, daha hafif JavaScript

Kod bölünmesi hangi sorunu çözer?

Bir web tarayıcısı bir gördüğünde & lt; script & gt; Referansladığınız JavaScript'i indirmek ve işlemek için zaman harcamak zorunda. Bu, üst düzey cihazlarda hızlı bir şekilde hissedebilir, ancak kullanılmayan JavaScript kodunu yüklemeye, ayrıştırılması ve yürütülmesi, daha yavaş bir ağ ve daha yavaş CPU ile ortalama mobil cihazlarda bir süre alabilir. Kahve dükkanı ya da otel wifi için oturum açmak zorunda kaldıysanız, yavaş ağ deneyimlerinin herkese olabileceğini biliyorsunuzdur.

JavaScript'i beklemek için harcanan her saniye önyükleme yapmayı beklemek, kullanıcıların deneyiminizle nasıl etkileşime girebileceğini geciktirebilir. Bu özellikle, UX'iniz kritik bileşenler için JS'ye güveniyorsa, hatta sadece UI'nin basit parçaları için olay işleyicileri ekliyorsa, durumdadır.

Kod bölmesiyle rahatsız etmem gerekiyor mu?

Kesinlikle Kodla bölünmeniz gerekip gerekmediğini kendinize sormaya değer (basit bir şekilde kullandıysanız) Web Sitesi Oluşturucu Muhtemelen yok). Siteniz, etkileşimli içerik için JavaScript gerektiriyorsa (menü çekmeceleri ve atlıkarouslar gibi özellikler için) veya JavaScript çerçevelerinde UI oluşturmak için tek sayfalı bir uygulamadır, cevabın muhtemelen 'evet' olmasıdır. Kod bölmesinin siteniz için değerli olup olmadığı, kendinize cevap vermeniz gereken bir sorudur. Mimarlığınızı ve sitenizin en iyi şekilde nasıl yüklendiğini anlıyorsunuz. Neyse ki burada size yardımcı olacak araçlar var. Tasarım sisteminizde değişiklikler uyguluyorsanız, paylaşılandaki değişiklikleri kaydedin. Bulut depolama Yani takımın görebilir.

Yardım almak

JavaScript kodu bölünmesi için yeni olanlar için, Deniz feneri - Chrome Geliştirici Araçlarındaki Denetimler Paneli - siteniz için bir sorun olup olmadığına dair bir ışık parlamasına yardımcı olabilir. Aramayacak olan denetim, JavaScript yürütme süresini azaltmaktır (belgelenmiştir) İşte ). Bu denetim, sayfanızdaki tüm komut dosyalarını, kullanıcıyı etkileşime girebilecek şekilde vurgulayabilir.

PageSeed Insights Sitenizin performansını da vurgulayabilen çevrimiçi bir araçtır ve Site performansınızdaki Deniz Feneri ve Gerçek Dünya Verileri'nden Chrome Kullanıcı Deneyimi Raporundan laboratuvar verilerini içerir. Sizin ağ sağlayıcısı Servisin başka seçeneklere sahip olabilir.

Chrome Geliştirici Araçlarında Kod Kapsamı

Daha iyi bölünebilecek pahalı komut dosyalarınız gibi görünürse, bir sonraki aracı, Chrome Geliştirici Araçlarındaki (DevTools & GT; sağ üst menü ve GT; daha fazla araç ve GT; kapsamında) kod kapsama alanıdır. Bu, sayfanızda kullanılmayan JavaScript (ve CSS) ne kadar olduğunu ölçer. Özetlenen her komut dosyası için DevTools 'kullanılmayan baytları' gösterecektir. Bu kod, kullanıcının ihtiyaç duyduğunda bölmeyi ve tembel yüklenmeyi düşünebilirsiniz.

Farklı kod bölünmesi türleri

JavaScript koduna girdiğinde alabileceğiniz birkaç farklı yaklaşım var. Bunlar siteniz için ne kadar geçerlidir? Sayfa / Uygulama 'Mantık' veya Kütüphaneleri / Çerçeveleri diğer 'satıcılardan' bölünmek istediğinize bağlı olarak değişme eğilimindedir.

Dinamik kod bölünmesi: Birçoğumuzun 'statik olarak' javascript modüllerini ve bağımlılıklarını, böylece bir dosyaya derleme süresince bir dosyaya bir araya getirilmeleri için ithal ediyorlar. 'Dinamik' kod bölümü, Javascript'inizdeki noktaları tanımlama yeteneğini, gerektiğinde bölünmek ve tembel yüklemek istediğiniz gibi. Modern JavaScript dinamik kullanıyor ithalat() Bunu başarmak için ifade. Bunu daha kısa bir süre sonra koruyacağız.

Satıcı kodu bölünmesi: Güvendiğiniz çerçeveler ve kütüphaneler (örn. Önbelleğin geçersiz kılınamasının sitenize dönen kullanıcılar için olumsuz etkisini azaltmak için, 'satıcınızı' ayrı bir komut dosyasına bölünür.

Giriş noktası kodu bölme: Girişler sitenizdeki veya uygulamanızdaki başlangıç ​​noktalarıdır veya web paketi gibi bir aracın bağımlılık ağacınızı oluşturmak için bakabileceği bir aracın bulunduğu uygulamalardır. Girişler tarafından ayrılma, istemci tarafı yönlendirmesinin kullanılmadığı sayfalar için kullanışlıdır veya sunucu ve istemci tarafı oluşturma bir kombinasyonuna dayanıyorsunuz.

Bu makaledeki amaçlarımız için, dinamik kod bölünmesi üzerine konsantre olacağız.

Kod bölünmesi ile el ele tutuşun

JavaScript performansını optimize edelim Üç sayıyı sıralayan basit bir uygulama Kod bölümü aracılığıyla - bu benim meslektaşımın housein djirdeh'in bir uygulaması. JavaScript yükümüzü hızlı bir şekilde yapmak için kullandığımız iş akışı ölçmek, optimize etmek ve izlemek. Buradan başlayın .

Performansı ölçmek

Herhangi bir optimizasyon eklemeye çalışmadan önce, ilk önce Javascript'imizin performansını ölçeceğiz. Sihirli Sıralayıcısı uygulaması Glitch'te barındırıldığından, kodlama ortamını kullanacağız. İşte nasıl gidilir:

• Canlı Göster düğmesini tıklayın.
• DevTools'ı CMD + Option + I / CTRL + Shift + I tuşlarına basarak açın.
• Ağ panelini seçin.
• Önbelleğin kontrol edildiğini ve uygulamayı yeniden yüklediğinden emin olun.

Bu basit uygulama sadece birkaç sayıyla sıralamak için 71.2 KB Javascript kullanıyor gibi görünüyor. Bu kesinlikle doğru görünmüyor. Kaynağımızda src / index.js , Lodash yardımcı kütüphanesi ithal ediliyor ve kullanıyoruz göre sırala - Sıralama yardımcı programlarından biri - numaralarımızı sıralamak için. Lodash birkaç faydalı işlev sunar, ancak uygulama sadece ondan tek bir yöntem kullanır. Gerçek gerçeğinde sadece küçük bir parçası kullanmanız gerektiğinde, üçüncü taraf bir bağımlılığı kurmak ve almak için yaygın bir hata.

Paketinizi Optimize Et

Javascript Bundle boyutumuzu süslemek için birkaç seçenek var:

1. Bir ThirdParty kütüphanesine güvenmek yerine özel bir sıralama yöntemi yazın.
2. Kullanmak Array.prototype.sort () , tarayıcıya yerleştirilmiş olan.
3. Sadece ithalat göre sırala Tüm kütüphane yerine yerleştirme yöntemi.
4. Sadece bir kullanıcının ihtiyaç duyduğunda sıralama için kodu indirin (bir düğmeye tıkladığınızda).

Seçenekler 1 ve 2, paketimizi azaltmak için uygundur - bunlar muhtemelen gerçek bir uygulama için anlam ifade eder. Öğretim amaçlı, farklı bir şey deneyeceğiz. Seçenekler 3 ve 4, uygulamanın performansını iyileştirmeye yardımcı olur.

Sadece ihtiyacınız olan kodu içe aktarın

Yalnızca bekar içe aktarmak için birkaç dosyayı değiştireceğiz. göre sırala Lodash'dan ihtiyacımız olan yöntem. Değiştirme ile başlayalım lodash bağımlılık package.json :

"lodash": "^4.7.0",

Bununla:

"lodash.sortby": "^4.7.0",

SRC / index.js'de, bu daha özel modülü içe aktaracağız:

 js
ithalat "./style.css";
İthalat _ "Lodash" den;
"Lodash.Sortby" dan ithalat sıralaması; 

Sonra, değerlerin nasıl sıralandığını güncelleyeceğiz:

 js
form.addeventlistener ("Gönder", E = ve GT; {
  e.preventDefault ();
  const değerleri = [input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  Const SortedValues ​​= _.Sortby (değerler);
  Const SortedValues ​​= Sortby (Değerler);
  multar.innerhtml = `
    & lt; h2 & gt;
      $ {sortedvalues}
    & lt; / H2 & gt;
  `
}); 

Sihirli numaralar uygulamasını yeniden yükleyin, geliştirici araçlarını açın ve tekrar ağ paneline bakın. Bu özel uygulama için, paket boyutumuzun küçük bir işle dört bir ölçekle azaltıldı. Ama iyileştirme için hala çok fazla yer var.

JavaScript kodu bölünmesi

Webpack, bugün web geliştiricileri tarafından kullanılan en popüler JavaScript modülü fırlatıcılardan biridir. Bütün JavaScript modüllerinizi ve diğer varlıklarınızı statik dosyalara dönüştürür. Web tarayıcılarınızı okuyabilir.

Bu uygulamadaki tek paket iki ayrı komut dosyasına ayrılabilir:

• Biri, ilk rotayı oluşturan kodlardan sorumludur.
• Bir diğeri ise sıralama kodumuzu içerir.

Dinamik İthalat Kullanma (ile ithalat() Anahtar kelime), ikinci bir komut dosyası talep üzerine tembel yüklenebilir. Sihirli numaralarımızda, kullanıcı düğmesini tıkladığında, komut dosyasını oluşturan kod yüklenebilir. Sıralama yöntemi için üst düzey içe aktarmayı kaldırarak başlıyoruz. src / index.js :

 "Lodash.Sortby" dan ithalat sıralaması; 

Düğme tıklandığında yangın olan olay dinleyicisinde içe aktarın:

form.addeventlistener ("Gönder", E = ve GT; {
  e.preventDefault ();
  İthalat ('lodash.sortby')
    .THEN (modül = & gt; module.default)
    .THEN (Sorttinput ())
    .catch (err = & gt; {alert (err)});
});

Bu dinamik ithalat() Kullandığımız özellik, JavaScript dil standardında bir modülü dinamik olarak içe aktarma yeteneği de dahil olmak üzere standart vitrin bir teklifinin bir parçasıdır. Webpack zaten bu sözdizimini destekler. Dinamik ithalatın nasıl çalıştığı hakkında daha fazla bilgi edinebilirsiniz. Bu makalede .

ithalat() İfade, çözdüğünde bir söz veriyor. Webpack, bunu ayrı bir komut dosyasına (veya kroknam) ayrılacağı bir nokta olarak görüyor. Modül döndükten sonra, module.default tarafından sağlanan varsayılan dışa aktarmaya başvurmak için kullanılır lodash . Söz, başka biriyle zincirlendi .sonra() çağırmak Sorttinput Üç giriş değerini sıralamak için yöntem. Söz konusu zincirin sonunda, .yakalamak() Bir hatanın sonucu olarak vaadin reddedildiği yerde işlemek için çağrılır.

Gerçek bir üretim uygulamasında, dinamik içe aktarma hatalarını uygun şekilde kullanmalısınız. Basit Uyarı Mesajları (burada kullanılanlara benzer), kullanıcıların yanlış gittiğini bildirmek için kullanıcıların kendileri için en iyi kullanıcı deneyimini sağlamayabilir.

"Ayrıştırma Hatası: İçe Aktar ve İhracat gibi bir işaret hatası görmeniz durumunda, yalnızca en üst düzeyde görünebilir" dedi. Webpack desteği olmasına rağmen, Glitch tarafından kullanılan Eslint'in ayarları (JavaScript işaret aracı) henüz bu sözdizimini içerecek şekilde güncellenmedi, ancak yine de çalışıyor.

Yapmamız gereken son şey yazmak Sorttinput Dosyamızın sonundaki yöntem. Bu, ithal edilen yöntemi gerektiren bir işlevi iade eden bir fonksiyon olmalıdır. lodash.sortby . İç içe işlev üç giriş değerini sıralayabilir ve DOM'u güncelleyebilir:

 Const SortInput = () = & gt; {
  dönüş (sırala) = & gt; {
    const değerleri = [
      giriş1.valueasnumber,
      giriş2.valueasnumber,
      giriş3.valueasnumber
    ];
    Const SortedValues ​​= Sortby (Değerler);
    multar.innerhtml = `
      & lt; h2 & gt;
        $ {sortedvalues}
      & lt; / H2 & gt;
    `
  };
} 

Sayıları izlemek

Şimdi uygulamayı son bir kez yeniden yükleyelim ve ağ paneline yakın bir göz tutalım. Uygulama yüklendiğinde sadece küçük bir başlangıç ​​paketinin nasıl indirildiğini fark etmelisiniz. Düğmeye tıklandıktan sonra, giriş numaralarını sıralamak için, Sıralama kodunu içeren komut dosyası / yığın alınır ve yürütülür. Bekledikleri için sayıların hala nasıl sıralandığını görüyor musunuz?

Javascript kodu bölme ve tembel yükleme, uygulamanızın veya sitenizin ilk paket boyutunu küçültmek için çok faydalı olabilir. Bu doğrudan kullanıcılar için daha hızlı sayfa süreleri ile sonuçlanabilir. Bir vanilya javascript uygulamasına bölünerek kod eklemeye bakmamıza rağmen, onu kütüphaneler veya çerçevelerle oluşturulan uygulamalara da uygulayabilirsiniz.

Javascript kütüphanesi veya çerçeve ile tembel yükleme

Çok sayıda popüler çerçeve, dinamik içe aktarma ve webpack kullanarak kod bölme ve tembel yükleme ekleme.

İşte nasıl tembelleştirebilirsiniz - bir film 'Açıklama' bileşenini reaksiyon kullanarak (ile) Reakt.lazy () ve askıya alma özellikleri), bileşen tembel yüklenirken bir "yükleme ..." geri dönüşü sağlamak için (bkz. İşte Daha fazla ayrıntı için):

 İthalat reaksiyonu, {} 'reaksiyon' den;
Const Açıklama = REACT.LAZY (() = & gt; ithalat ('./ Açıklama'));
fonksiyon uygulaması () {
  dönüş (
    & lt; div & gt;
      'Benim filmim & lt; / h1 & gt;
      & lt; sussefse fallback = "yükleniyor ..." & gt;
        & lt; tanımı / ve gt;
      & lt; / SUSPENSE & GT;
    & lt; / div & gt;
  );
} 

Kod bölümü, JavaScript'in kullanıcı deneyiminiz üzerindeki etkisini azaltmaya yardımcı olabilir. Kesinlikle JavaScript demetleri varsa ve şüpheli olduğunda, ölçülmeyi, optimize etmeyi ve izlemeyi unutmayın.

Bu makale başlangıçta 317 sayılı olarak yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 317 burada satın al veya abone olun .

İlgili Makaleler:

• En iyi JavaScript çerçevelerinin 9'u
• 15 Kullanılmanız gereken 15 Temel JavaScript araçları
• En iyi JavaScript API'lerinin 14'ü