Kullanılmayan kodu kaldırın

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:

  1. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+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.
ziyaret edin.
Paket isteği içeren ağ paneli
JavaScript dosyasının boyutunu gösteren Geliştirici Araçları.

Kapsam sekmesi Geliştirici Araçları, uygulamanızdaki CSS ve JS kodunun ne kadarının kullanılmadığını da belirtir.

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

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/

Lighthouse Kullanılmayan JavaScript raporunu azalt
Kullanılmayan JavaScript raporunu azaltın.

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.

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

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.