npm gibi kayıtlarda, JavaScript dünyasını daha iyi için dönüştürdü. Bunu da yarım milyondan fazla herkese açık paketi indirip kullanabilirsiniz. Ancak çoğu zaman istemeyiz. Bu sorunu düzeltmek için paketinizi analiz edin kullanarak kullanılmayan ve gereksiz kitaplıkları kaldırın.
Core Web Vitals üzerindeki etki
Kullanılmayan kodları kaldırarak web sitenizin Core Web Vitals. Largest Contentful Paint, örneğin, gereksiz büyüklükteki öğeler olduğunda, kullanılmayan koddan bant genişliği için diğer kaynaklarla rekabet eder. LCP, büyükse LCP'den de etkilenebilir İşaretlemeyi yalnızca istemcide oluşturan JavaScript öğeleri LCP adaylarına referanslar içermemelidir kaynakların yüklenmesini geciktirerek.
Kullanılmayan kod, Sonraki Boyamayla Etkileşimi (INP) de etkileyebilir. çünkü kullanılmayan JavaScript'in bile indirilmesi, ayrıştırılması, derlenmesi ve yürütüldü. Kullanılmayan kod, kaynak yüklemesinde gereksiz gecikmelere yol açabilir kötü sayfaya neden olan zaman, bellek kullanımı ve ana iş parçacığı etkinliği daha yüksek olacaktır.
Bu kılavuzda, kullanılmayan kodlar için projenizin kod tabanını nasıl analiz edeceğiniz ve gönderim yaptığınız JavaScript öğelerindeki kullanılmayan kodları budamaya yönelik stratejiler sunar üretimde kullanıcılarınıza sunmalısınız.
Paketinizi analiz edin
Geliştirici Araçları, tüm ağ isteklerinin boyutunu gösterebilir:
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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 işaretleyin.
- Sayfayı tekrar yükleyin.
Kapsam sekmesi Geliştirici Araçları, uygulamanızdaki CSS ve JS kodunun ne kadarının kullanılmadığını da belirtir.
Düğüm KSA'sı aracılığıyla tam bir Lighthouse yapılandırması belirterek Kullanılmayan kodun ne kadar gönderildiğini izlemek için Kullanılmayan JavaScript denetimini azaltın başvurunuzla/
Paketleyici olarak webpack'i kullanıyorsanız Webpack Bundle Analiz Aracı paketin içeriğini araştırmanıza yardımcı olabilir. Eklentiyi diğer eklentiler gibi bir webpack yapılandırmaları dosyası oluşturun:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Webpack yaygın olarak tek sayfalık uygulamalar oluşturmak için kullanılsa da diğer Parcel ve Rollup'ın sunduğu görselleştirme araçlarını, kullanabileceğiniz araçlardır.
Uygulamayı bu eklentiyle birlikte yeniden yüklediğinizde, uygulamanın yakınlaştırılabilir ağaç haritası tüm paketinizi kullanabilirsiniz.
Bu görselleştirme, paketinizin hangi bölümlerinin Böylece kütüphanelerin sayısını ve boyutunu daha iyi anlayabilirsiniz. içe aktarmanızı sağlar. Bu sayede, kullanılmayan herhangi bir veya gereksiz kitaplıklar vardır.
Kullanılmayan kitaplıkları kaldırın
Önceki ağaç haritasında, tek bir pakette çok sayıda paket vardır
@firebase alanı. Web siteniz için yalnızca Firebase veritabanı bileşeni gerekiyorsa
kitaplığı getirmek için içe aktarma işlemlerini güncelleyin:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Artık kullanılmadığından emin olduğunuz gizemli görünümlü paket için bir adım geriye çekilip en üst düzey bağımlılıklarınızın hangileri yardımcı olabilir. Yalnızca ihtiyacınız olan bileşenleri içe aktarmanın bir yolunu bulmaya çalışın. Kitaplık kullanmıyorsanız kaldırın. Kitaplık, ilk sayfa yükleme işlemi, geç yükleme seçeneğini değerlendirin somut olarak ortaya koyar.
Webpack kullanıyorsanız bu eklentilerin otomatik olarak kullanılmayan kodları popüler kitaplıklardan kaldırın.
Gereksiz kitaplıkları kaldırın
Her kitaplık parçalara ayrılıp seçilerek içe aktarılamaz. Bu senaryolarda kitaplığı tamamen kaldırıp kaldıramayacağınızı düşünün. Özel bir çözüm geliştirmek veya daha hafif bir alternatiften yararlanmak her zaman dikkate almaya değer seçeneklerdir. Ancak her şeyin karmaşıklığını bir kitaplığı kaldırmadan önce bu stratejilerden herhangi biri için tamamen uygulamanızdan.