Kullanılmayan kodu kaldırın

npm gibi kayıt otoriteleri, herkesin yarım milyondan fazla herkese açık paketi indirip kullanmasına olanak tanıyarak JavaScript dünyasını daha iyi bir hale getirdi. Ancak genellikle tam olarak kullanmadığımız kitaplıkları ekleriz. Bu sorunu düzeltmek için kullanılmayan kodu tespit etmek üzere paketinizi analiz edin, ardından kullanılmayan ve gereksiz kitaplıkları kaldırın.

Kullanılmayan kodu kaldırarak web sitenizin Core Web Vitals metriklerini iyileştirebilirsiniz. Örneğin, gereksiz yere büyük öğeler diğer kaynaklarla bant genişliği için rekabet ettiğinde Largest Contentful Paint, kullanılmayan koddan etkilenebilir. Yalnızca istemcide işaretlemeyi oluşturan büyük JavaScript öğeleri LCP adaylarına referans içeriyorsa bu kaynakların yüklenmesini geciktirerek LCP de etkilenebilir.

Kullanılmayan JavaScript'in bile indirilmesi, ayrıştırılması, derlenmesi ve ardından yürütülmesi gerektiğinden, kullanılmayan kod Interaction to Next Paint (INP)'yi de etkileyebilir. Kullanılmayan kod, kaynak yükleme süresi, bellek kullanımı ve ana ileti dizisi etkinliğinde gereksiz gecikmeler oluşturarak sayfanın yanıt vermesini yavaşlatabilir.

Bu kılavuzda, projenizin kod tabanının kullanılmayan kod açısından nasıl analiz edileceği açıklanmakta ve üretimde kullanıcılarınıza gönderdiğiniz JavaScript öğelerinden kullanılmayan kodu kaldırmaya yönelik stratejiler sunulmaktadır.

Paketinizi analiz etme

Geliştirici Araçları, tüm ağ isteklerinin boyutunu size gösterebilir:

  1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  2. sekmesini tıklayın.
  3. Önbelleği devre dışı bırak onay kutusunu işaretleyin.
  4. Sayfayı tekrar yükleyin.
Paket isteği içeren ağ paneli
Bir JavaScript dosyasının boyutunu gösteren DevTools.

DevTools'daki Kapsam sekmesi, uygulamanızda ne kadar CSS ve JS kodunun kullanılmadığını da gösterir.

Geliştirici Araçları'nda Kod Kapsamı
Kapsam sekmesi.

Node KSA üzerinden tam bir Lighthouse yapılandırması belirterek, uygulamanızla birlikte ne kadar kullanılmayan kod gönderildiğini izlemek için Kullanılmayan JavaScript'i azalt denetimini çalıştırabilirsiniz.

Lighthouse Kullanılmayan JavaScript kodları azaltın raporu
Kullanılmayan JavaScript'i azaltma raporunu inceleyin.

Paketleyici olarak webpack kullanıyorsanız Webpack Bundle Analyzer, paketi oluşturan öğeleri incelemenize yardımcı olabilir. Diğer tüm eklentiler gibi eklentiyi webpack yapılandırma dosyanıza ekleyin:

module.exports = {
 
//...
  plugins
: [
   
//...
   
new BundleAnalyzerPlugin()
 
]
}

Webpack genellikle tek sayfalık uygulamalar oluşturmak için kullanılsa da Parcel ve Rollup gibi diğer paketleyiciler de paketinizi analiz etmek için kullanabileceğiniz görselleştirme araçlarına sahiptir.

Uygulamayı bu eklentiyle birlikte yeniden yüklediğinizde, paketinizin tamamının yakınlaştırılabilir bir ağaç haritası gösterilir.

Webpack Bundle Analyzer
Webpack Bundle Analyzer'ın ağaç haritası görünümü.

Bu görselleştirme, paketinizin hangi bölümlerinin diğerlerinden daha büyük olduğunu gösterir. Böylece, uygulamanızın içe aktardığı kitaplıkların sayısını ve boyutunu daha iyi anlayabilirsiniz. Bu, kullanılmayan veya gereksiz kitaplıklar kullanıp kullanmadığınızı belirlemenize yardımcı olabilir.

Kullanılmayan kitaplıkları kaldırma

Önceki ağaç haritası resminde, tek bir @firebase alanında oldukça fazla paket var. Web sitenizin yalnızca Firebase veritabanı bileşenine ihtiyacı varsa içe aktarma işlemlerini bu kitaplığı alacak şekilde güncelleyin:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

Hiçbir yerde kullanılmadığından emin olduğunuz gizemli görünümlü paket için bir adım geri çekilin ve hangi üst düzey bağımlılıklarınızın bu paketi kullandığını öğrenin. Yalnızca ihtiyacınız olan bileşenleri içe aktarmanın bir yolunu bulmaya çalışın. Kullanmadığınız kitaplıkları kaldırın. Kitaplık ilk sayfa yüklemesi için gerekli değilse gecikmeli yüklemeyi deneyin.

Webpack kullanıyorsanız popüler kitaplıklardaki kullanılmayan kodu otomatik olarak kaldıran eklentilerin listesine göz atın.

Gereksiz kitaplıkları kaldırma

Tüm kitaplıklar parçalara ayrılıp seçerek içe aktarılamaz. Bu senaryolarda, kitaplığı tamamen kaldırıp kaldıramayacağınızı düşünün. Özel bir çözüm oluşturmak veya daha hafif bir alternatiften yararlanmak her zaman dikkate alınması gereken seçenekler arasındadır. Ancak bir kitaplığı uygulamanızdan tamamen kaldırmadan önce bu stratejilerden herhangi biri için gereken karmaşıklığı ve çabayı değerlendirmeniz önemlidir.