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 hâle 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.
Core Web Vitals üzerindeki etkisi
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:
- Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Önbelleği devre dışı bırak onay kutusunu işaretleyin.
- Sayfayı tekrar yükleyin.
DevTools'daki Kapsam sekmesi, uygulamanızda ne kadar CSS ve JS kodunun kullanılmadığını da gösterir.
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.
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ılır ancak 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.
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ığına bakın. 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.