Sayfaların daha hızlı yüklenmesi için modern tarayıcılara modern kod sunma

Houssein Djirdeh

Önde gelen tarayıcıların tamamında iyi çalışan web siteleri oluşturmak, açık web ekosisteminin temel ilkelerinden biridir. Ancak bu, yazdığınız tüm kodun hedeflemeyi planladığınız her bir tarayıcıda desteklendiğinden emin olmak için ek çalışma yapılması anlamına gelir. Yeni JavaScript dil özelliklerini kullanmak istiyorsanız bu özellikleri, henüz desteklenmeyen tarayıcılar için geriye dönük uyumlu biçimlere aktarmanız gerekir.

Babel, farklı tarayıcıların ve ortamların (Düğüm gibi) anlayabileceği koda daha yeni söz dizimi içeren kodları derlemek için en yaygın olarak kullanılan araçtır. Bu kılavuzda Babel kullandığınız varsayılır. Bu nedenle, henüz yapmadıysanız uygulamayı uygulamanıza eklemek için kurulum talimatlarını uygulamanız gerekir. Uygulamanızda modül paketleyici olarak webpack kullanıyorsanız Build Systems içinde webpack seçeneğini belirleyin.

Babel'i yalnızca kullanıcılarınız için gerekenleri aktarmak üzere kullanmak için aşağıdakileri yapmanız gerekir:

  1. Hedeflemek istediğiniz tarayıcıları belirleyin.
  2. @babel/preset-env öğesini uygun tarayıcı hedefleriyle kullanın.
  3. Aktarılan kodun ihtiyacı olmayan tarayıcılara gönderilmesini durdurmak için <script type="module"> değerini kullanın.

Hedeflemek istediğiniz tarayıcıları belirleyin

Uygulamanızdaki kodun aktarılma yöntemini değiştirmeye başlamadan önce, uygulamanıza hangi tarayıcıların eriştiğini belirlemeniz gerekir. Kullanıcılarınızın şu anda hangi tarayıcıları kullandığını ve bilinçli bir karar vermek için hedeflemeyi planladığınız tarayıcıları analiz edin.

@babel/preset-env hesabını kullan

Kodun çevrilmesi genellikle orijinal biçiminden daha büyük bir dosya boyutuyla sonuçlanır. Derleme miktarını en aza indirerek, bir web sayfasının performansını artırmak için paketlerinizin boyutunu küçültebilirsiniz.

Babel, kullandığınız belirli dil özelliklerini seçerek derlemek için belirli eklentiler eklemek yerine, eklentileri bir araya getiren bir dizi hazır ayar sağlar. Yalnızca hedeflemeyi planladığınız tarayıcılar için gereken dönüşümleri ve çoklu dolguları dahil etmek üzere @babel/preset-env parametresini kullanın.

@babel/preset-env değerini Babel yapılandırma dosyanızdaki (.babelrc) presets dizisine ekleyin:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

browsers alanına uygun bir sorgu ekleyerek hangi tarayıcı sürümlerini dahil etmek istediğinizi belirtmek için targets alanını kullanın. @babel/preset-env, tarayıcıları hedeflemek için farklı araçlar arasında paylaşılan açık kaynaklı bir yapılandırma olan browserlist ile entegre olur. Uyumlu sorguların tam listesini tarayıcı listesi belgelerinde bulabilirsiniz. Diğer bir seçenek de hedeflemek istediğiniz ortamları listelemek için .browserslistrc dosyası kullanmaktır.

">0.25%" değeri, Babel'e yalnızca küresel kullanımın% 0,25'inden fazlasını oluşturan tarayıcıları desteklemek için gereken dönüşümleri dahil etmesini bildirir. Bu, paketinizin, kullanıcıların çok küçük bir yüzdesi tarafından kullanılan tarayıcılar için gereksiz aktarılan kod içermemesini sağlar.

Çoğu durumda bu, aşağıdaki yapılandırmayı kullanmaktan daha iyi bir yaklaşımdır:

  "targets": "last 2 versions"

"last 2 versions" değeri, kodunuzu her tarayıcının son iki sürümü için aktarır. Diğer bir deyişle, kullanımdan kaldırılan tarayıcılar (ör. Internet Explorer) için destek sağlanır. Uygulamanıza erişmek için bu tarayıcıların kullanılmasını beklemiyorsanız bu durum paketinizin boyutunu gereksiz bir şekilde artırabilir.

Sonuç olarak, yalnızca ihtiyaçlarınıza uygun tarayıcıları hedeflemek için uygun sorgu kombinasyonunu seçmeniz gerekir.

Modern hata düzeltmelerini etkinleştir

@babel/preset-env, birden çok JavaScript söz dizimi özelliğini koleksiyonlar halinde gruplandırır ve belirtilen hedef tarayıcılara göre bunları etkinleştirir/devre dışı bırakır. Bu yöntem iyi sonuçlansa da, hedeflenen bir tarayıcı tek bir özelliğe sahip bir hata içerdiğinde, söz dizimi özelliklerinden oluşan bir koleksiyonun tamamı dönüştürülür. Bu da genellikle gerekenden daha fazla dönüştürülmüş kodla sonuçlanır.

İlk olarak ayrı bir hazır ayar olarak geliştirilen @babel/preset-env içindeki hata düzeltmeleri seçeneği, bazı tarayıcılarda bozuk olan modern söz dizimini bu tarayıcılarda bozuk olmayan en yakın eşdeğer söz dizimine dönüştürerek bu sorunu çözmektedir. Sonuç olarak, tüm hedef tarayıcılarda uyumluluğu garanti eden birkaç küçük söz dizimi ayarıyla, neredeyse aynı modern kod elde edilir. Bu optimizasyonu kullanmak için @babel/preset-env 7.10 veya sonraki bir sürümün yüklü olduğundan emin olun, ardından bugfixes özelliğini true olarak ayarlayın:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

Babel 8'de bugfixes seçeneği varsayılan olarak etkindir.

<script type="module"> hareketini kullanın

JavaScript modülleri veya ES modülleri, tüm önemli tarayıcılarda desteklenen yeni bir özelliktir. Diğer modüllerden içe ve dışa aktarabilen komut dosyaları oluşturmak için modüller kullanabilirsiniz. Ancak bu modülleri, yalnızca destekleyen tarayıcıları hedeflemek için @babel/preset-env ile de kullanabilirsiniz.

Belirli tarayıcı sürümlerini veya pazar payını sorgulamak yerine, .babelrc dosyanızın targets alanında "esmodules" : true değerini belirtebilirsiniz.

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

Babel ile derlenen yeni ECMAScript özelliklerinin çoğu, JavaScript modüllerini destekleyen ortamlarda zaten desteklenmektedir. Böylece, gerçekten ihtiyaç duyan tarayıcılar için yalnızca aktarılan kodun kullanıldığından emin olma işlemini basitleştirirsiniz.

Modülleri destekleyen tarayıcılar, nomodule özelliğine sahip komut dosyalarını yoksayar. Buna karşılık, modülleri desteklemeyen tarayıcılar type="module" içeren komut dosyası öğelerini yoksayar. Bu, derlenmiş bir yedeğin yanı sıra bir modülü de dahil edebileceğiniz anlamına gelir.

İdeal olarak, bir uygulamanın iki sürüm komut dosyası şu şekilde dahil edilir:

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

Modülleri destekleyen tarayıcılar main.mjs getirme ve yürütme işlemini destekler ve compiled.js politikasını yoksayar. Modülleri desteklemeyen tarayıcılar ise tam tersini yapar.

Webpack kullanıyorsanız uygulamanızın iki ayrı sürümü için yapılandırmalarınızda farklı hedefler belirleyebilirsiniz:

  • Yalnızca modülleri destekleyen tarayıcılara yönelik bir sürüm.
  • Herhangi bir eski tarayıcıda çalışan derlenmiş bir komut dosyası içeren sürüm. Çevirinin daha fazla tarayıcıyı desteklemesi gerektiğinden, bu dosya daha büyük bir dosya boyutuna sahiptir.

Yorumları için Connor Clark ve Jason Miller'a teşekkür ederiz.