npm gibi kayıt otoriteleri, herkesin yarım milyondan fazla genel paketi indirip kullanmasına olanak tanıyarak JavaScript dünyasını daha iyi bir yönde dönüştürdü. Ama çoğu zaman tam olarak kullanmadığımız kitaplıkları da ekliyoruz. Bu sorunu düzeltmek için paketinizi analiz ederek kullanılmayan kodları tespit edin, ardından kullanılmayan ve gereksiz kitaplıkları kaldırın.
Core Web Vitals'a Etkisi
Kullanılmayan kodları kaldırarak web sitenizin Önemli Web Verileri'ni iyileştirebilirsiniz. Örneğin, Largest Contentful Paint, gereksiz şekilde büyük öğeler bant genişliği için diğer kaynaklarla rekabet ettiğinde kullanılmayan koddan etkilenebilir. İşaretlemeyi yalnızca istemcide oluşturan büyük JavaScript öğelerinin, bu kaynakların yüklenebileceği zamanı geciktirerek LCP adaylarına referanslar içermesi de LCP'den etkilenebilir.
Kullanılmayan kodlar da Sonraki Boyamayla Etkileşim'i (INP) etkileyebilir. Çünkü kullanılmayan JavaScript'in bile indirilmesi, ayrıştırılması, derlenmesi ve yürütülmesi gerekir. Kullanılmayan kodlar kaynak yükleme süresinde, bellek kullanımında ve ana iş parçacığı etkinliğinde gereksiz gecikmelere neden olarak sayfanın yanıt verme hızının zayıf olmasına yol açabilir.
Bu kılavuzda, projenizin kod tabanında kullanılmayan kodların nasıl analiz edileceği açıklanmakta ve üretimde kullanıcılarınıza gönderdiğiniz JavaScript öğelerindeki kullanılmayan kodların ayıklanması için stratejiler sunulmaktadır.
Paketinizi analiz edin
Geliştirici Araçları, tüm ağ isteklerinin boyutunu gösterebilir:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Önbelleği devre dışı bırak onay kutusunu seçin.
- Sayfayı tekrar yükleyin.
Geliştirici Araçları'ndaki Kapsam sekmesi, uygulamanızdaki CSS ve JS kodlarının ne kadarının kullanılmadığını da gösterir.
Node KSA üzerinden tam bir Lighthouse yapılandırması belirterek, uygulamanıza ne kadar kullanılmayan kod gönderildiğini izlemek için Kullanılmayan JavaScript sayısını azaltma denetimini çalıştırabilirsiniz.
Paketleyici olarak webpack'i kullanıyorsanız Webpack Bundle Analiz, paketi nelerin oluşturduğunu araştırmanıza yardımcı olabilir. Eklentiyi diğer eklentiler gibi web paketi yapılandırmaları dosyanıza ekleyin:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Webpack, tek sayfalık uygulamalar oluşturmak için yaygın olarak 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 eklenti dahil olarak yeniden yüklediğinizde, tüm paketinizin yakınlaştırılabilir bir ağaç haritasını gösterir.
Bu görselleştirme, paketinizin hangi bölümlerinin diğerlerinden daha büyük olduğunu gösterir ve 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ık kullanıp kullanmadığınızı belirlemenize yardımcı olabilir.
Kullanılmayan kitaplıkları kaldırın
Önceki Treemap görüntüsünde, tek bir @firebase alanında epey paket bulunuyor. Web sitenizde yalnızca Firebase veritabanı bileşeni gerekiyorsa içe aktarmaları bu kitaplığı getirecek şekilde güncelleyin:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Hiçbir yerde kullanılmadığından oldukça emin olduğunuz gizemli görünümlü paket için bir adım geri çekilin ve bu paketi en üst düzey bağımlılıklarınızdan hangisinin kullandığını görün. Yalnızca ihtiyacınız olan bileşenleri içe aktarmanın bir yolunu bulmaya çalışın. Kullanılmayan kitaplıklar varsa bunları kaldırın. Kitaplık, ilk sayfa yüklemesi için gerekli değilse geç yüklemeyi deneyin.
Webpack kullanıyorsanız kullanılmayan kodu popüler kitaplıklardan otomatik olarak kaldıran eklentilerin listesine göz atın.
Gereksiz kitaplıkları kaldırın
Tüm kitaplıklar parçalara ayrılıp seçerek içe aktarılamaz. Bu durumlarda 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 göz önünde bulundurmaya değer seçenekler olmalıdır. Bununla birlikte, bir kitaplığı uygulamanızdan tamamen kaldırmadan önce bu stratejilerin her ikisi için de gereken karmaşıklığı ve çabayı değerlendirmeniz önemlidir.