Kapsam: Kullanılmayan JavaScript ve CSS'yi bulma

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome Geliştirici Araçları'ndaki Kapsam paneli, kullanılmayan JavaScript ve CSS kodunu bulmanıza yardımcı olabilir. Kullanılmayan kodları kaldırmak, sayfanızın yüklenmesini hızlandırabilir ve kullanıcılarınızın mobil verilerini kurtarabilir.

Kod kapsamı analiz ediliyor.

Genel bakış

Kullanılmayan JavaScript veya CSS göndermek, web geliştirmede yaygın olarak karşılaşılan bir sorundur. Örneğin, sayfanızda Önyükleme'nin düğme bileşenini kullanmak istediğinizi varsayalım. Düğme bileşenini kullanmak için HTML'nizde Bootstrap stil sayfasına bir bağlantı eklemeniz gerekir. Örneğin:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

Bu stil sayfası yalnızca düğme bileşenine ilişkin kodu içermez. Tüm Bootstrap bileşenleri için CSS'yi içerir. Ancak diğer Önyükleme bileşenlerinin hiçbirini kullanmıyorsunuz. Sayfanız ihtiyaç duymadığı bir CSS grubunu indiriyor. Bu fazladan CSS şu nedenlerden dolayı sorun teşkil eder:

  • Fazladan kod, sayfanızın yüklenmesini yavaşlatır. Oluşturma Engelleme CSS'sine bakın.
  • Kullanıcı sayfaya mobil cihazdan erişirse ekstra kod kullanıcının mobil verilerini kullanır.

Kapsam panelini açma

  1. Komut Menüsü'nü açın.

  2. coverage yazmaya başlayın, Kapsamı Göster komutunu seçin ve komutu çalıştırmak için Enter tuşuna basın. Kapsam paneli Çekmece'de açılır.

    Kapsam paneli.

Kayıt kodu kapsamı

Kod kapsamını yakalamak için:

  1. Kapsam kapsamını ayarlamak için Kapsam panelinin üst kısmındaki işlem çubuğunda, açılır listeden İşlev başına veya Blok başına'yı seçin.

  2. Kaydı başlatmak için yenile'yi tıklayın Kapsam enstrümantasyonunu başlat ve sayfayı yeniden yükle Kapsam paneli sayfayı yeniden yükler, sayfayı yüklemek için gereken kodu yakalar ve siz sayfayla etkileşimde bulunurken kayda devam eder.

  3. Kayıt kodu kapsamını durdurmak için stop_circle Kapsam enstrümantasyonunu durdur ve sonuçları göster seçeneğini tıklayın.

Kod kapsamını analiz edin

Kapsam panelindeki tabloda hangi kaynakların analiz edildiği ve her kaynakta ne kadar kodun kullanıldığı gösterilir.

Bir kaynağı Kaynaklar panelinde açmak için bir satırı tıklayın ve kullanılan kod ile kullanılmayan kodun satır satır dökümünü inceleyin. Kullanılmayan tüm kod satırları, solda satır numaraları bulunan sütunun yanında kırmızı çizgilerle işaretlenir.

Kod kapsamı raporu.

  • URL sütunu, analiz edilen kaynağın URL'sidir.
  • Tür sütunu, kaynağın CSS, JavaScript veya her ikisini de içerip içermediğini belirtir.
  • Toplam Bayt sütunu, bayt cinsinden kaynağın toplam boyutunu belirtir.
  • Kullanılmayan Baytlar sütunu, kullanılmayan bayt sayısıdır.
  • Adlandırılmamış son sütun, Toplam Baytlar ve Kullanılmayan Baytlar sütunlarının bir görselleştirmesidir. Çubuğun kırmızı bölümü kullanılmayan baytlardır. Gri bölümde ise bayt kullanılır.

Raporu URL'ye göre filtrelemek için işlem çubuğundaki filtrede belirtin.

Kapsam panelinin alt kısmındaki durum çubuğu, kullanılan kodun yüzdesini gösterir. Durum çubuğu, filtrelemeyi dikkate alır.

Filtre çubuğunun yanındaki açılır listeden Tümü'nü ya da yalnızca CSS veya JavaScript'i seçerek raporunuzda gösterilmesini sağlayabilirsiniz.

Raporunuza uzantı kodu eklemek için check_box İçerik komut dosyaları'nı açın.

Raporunuzu dışa aktarmak için indir Kapsamı dışa aktar'ı tıklayın.