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

Houssein Djirdeh

Tüm büyük tarayıcılarda iyi çalışan web siteleri oluşturmak, açık web ekosisteminin temel ilkelerinden biridir. Ancak bu, yazdığınız kodun tümünün hedeflemeyi planladığınız her tarayıcıda desteklenmesini sağlamaya yönelik ek çalışma anlamına gelir. Yeni JavaScript dil özelliklerini kullanmak istiyorsanız bu özellikleri henüz desteklemeyen tarayıcılar için geriye dönük uyumlu biçimlere dönüştürmeniz gerekir.

Babel, daha yeni söz dizimi içeren kodu farklı tarayıcıların ve ortamların (Node gibi) anlayabileceği koda derlemek için en yaygın kullanılan araçtır. Bu kılavuzda Babel'i kullandığınız varsayılmaktadır. Dolayısıyla, henüz uygulamanıza dahil etmediyseniz kurulum talimatlarını uygulayarak Babel'i uygulamanıza dahil etmeniz gerekir. Uygulamanızda modül birleştirme aracı olarak webpack kullanıyorsanız Build Systems bölümünde webpack seçeneğini belirleyin.

Babel'i yalnızca kullanıcılarınız için gerekenleri derlemek üzere kullanmak istiyorsanız:

  1. Hedeflemek istediğiniz tarayıcıları belirleyin.
  2. @babel/preset-env öğesini uygun tarayıcı hedefleriyle kullanın.
  3. <script type="module"> kullanarak, derlenmiş kodun ihtiyaç duymayan tarayıcılara gönderilmesini durdurabilirsiniz.

Hedeflemek istediğiniz tarayıcıları belirleme

Uygulamanızdaki kodun nasıl derlendiğini değiştirmeye başlamadan önce uygulamanıza hangi tarayıcıların eriştiğini belirlemeniz gerekir. Bilgili bir karar vermek için kullanıcılarınızın şu anda kullandığı ve hedeflemeyi planladığınız tarayıcıları analiz edin.

@babel/preset-env kullanma

Kodun derlenmesi genellikle dosya boyutu orijinal biçimlerinden daha büyük olan bir dosyayla sonuçlanır. Yaptığınız derleme miktarını en aza indirerek web sayfasının performansını iyileştirmek için paketlerinizin boyutunu azaltabilirsiniz.

Babel, kullandığınız belirli dil özelliklerini seçerek derlemek için belirli eklentiler eklemek yerine, eklentileri bir araya getiren çeşitli hazır ayarlar sunar. Yalnızca hedeflemeyi planladığınız tarayıcılar için gereken dönüştürme işlemlerini ve polyfill'leri dahil etmek üzere @babel/preset-env kullanın.

Babel yapılandırma dosyanızdaki presets dizisine @babel/preset-env öğesini ekleyin: .babelrc

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

browsers alanına uygun bir sorgu ekleyerek dahil etmek istediğiniz tarayıcı sürümlerini 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 browserslist ile entegre olur. Uyumlu sorguların tam listesini browserslist belgelerinde bulabilirsiniz. Hedeflemek istediğiniz ortamları listelemek için .browserslistrc dosyası da kullanabilirsiniz.

">0.25%" değeri, Babel'e yalnızca dünya genelindeki kullanımın% 0,25'inden fazlasını oluşturan tarayıcıları desteklemek için gereken dönüştürme işlemlerini dahil etmesini söyler. Bu sayede paketiniz, kullanıcıların çok küçük bir yüzdesi tarafından kullanılan tarayıcılar için gereksiz şekilde derlenmiş kod içermez.

Ç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 derleyip dönüştürür. Bu, Internet Explorer gibi kullanımdan kaldırılan tarayıcılar için destek sağlanacağı anlamına gelir. Bu tarayıcıların uygulamanıza erişmek için kullanılmasını beklemiyorsanız bu, paketinizin boyutunu gereksiz yere artırabilir.

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

Modern hata düzeltmelerini etkinleştirme

@babel/preset-env, birden fazla JavaScript söz dizimi özelliğini koleksiyonlar halinde gruplandırır ve belirtilen hedef tarayıcılara göre etkinleştirir/devre dışı bırakır. Bu yöntem iyi sonuç verse de hedeflenen tarayıcıda yalnızca tek bir özellikte hata olduğunda söz dizimi özelliklerinin tamamı dönüştürülür. Bu durum genellikle gerekenden daha fazla dönüştürülmüş koda neden olur.

Başlangıçta ayrı bir hazır ayar olarak geliştirilen @babel/preset-env'teki hata düzeltme 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 çözer. Sonuç, tüm hedef tarayıcılarda uyumluluğu garanti eden birkaç küçük söz dizimi değişikliğiyle neredeyse aynı modern koddur. Bu optimizasyonu kullanmak için @babel/preset-env 7.10 veya sonraki bir sürümü yüklediğinizden emin olun, ardından bugfixes mülkünü true olarak ayarlayın:

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

Babel 8'de bugfixes seçeneği varsayılan olarak etkinleştirilecektir.

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

JavaScript modülleri veya ES modülleri, tüm büyük tarayıcılarda desteklenen nispeten yeni bir özelliktir. Modülleri, diğer modüllerden içe ve dışa aktarılabilen komut dosyaları oluşturmak için kullanabilirsiniz. Ancak modülleri yalnızca bunları destekleyen tarayıcıları hedeflemek için @babel/preset-env ile de kullanabilirsiniz.

Belirli tarayıcı sürümleri veya pazar payı için sorgu yerine .babelrc dosyanızın targets alanında "esmodules" : true değerini belirtebilirsiniz.

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

Babel ile derlenen birçok yeni ECMAScript özelliği, JavaScript modüllerini destekleyen ortamlarda zaten desteklenmektedir. Böylece, gerçekten ihtiyacı olan tarayıcılarda yalnızca derlenmiş kodun kullanılmasını sağlama sürecini 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. Yani hem bir modül hem de derlenmiş bir yedek ekleyebilirsiniz.

İdeal olarak, bir uygulamanın iki sürüm komut dosyası aşağıdaki gibi eklenir:

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

Modülleri destekleyen tarayıcılar main.mjs öğesini getirip yürütür ve compiled.js öğesini yoksayar. Modülleri desteklemeyen tarayıcılar ise tam tersini yapar.

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

  • Yalnızca modülleri destekleyen tarayıcılar için bir sürüm.
  • Herhangi bir eski tarayıcıda çalışan derlenmiş bir komut dosyası içeren sürüm. Bu yöntem, daha geniş bir tarayıcı yelpazesini desteklemesi gerektiğinden daha büyük dosya boyutuna sahiptir.

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