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'leri ve CSS kodu. Kullanılmayan kodları kaldırmak, sayfanızın yüklenmesini hızlandırabilir ve kullanıcılarınızın mobil verisinden tasarruf edebilir.

Kod kapsamı analiz ediliyor.

Genel Bakış

Kullanılmayan JavaScript veya CSS'nin gönderilmesi, web geliştirmede sık karşılaşılan bir sorundur. Örneğin, Bootstrap'in düğme bileşenini kullanmak istediğinizi varsayalım. dokunun. Düğme bileşenini kullanmak için Bootstrap'in stil sayfasını HTML'nize şu şekilde ekleyin:

...
<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şeninin kodunu içermez. Google Bootstrap'in tüm bileşenleri için CSS'yi içerir. Ancak, bileşenlerinden birini seçin. Sayfanız, indirebileceğiniz çok sayıda Gereksiz CSS. Bu fazladan CSS aşağıdaki için bir sorundur: nedenler:

  • Ekstra kod, sayfanızın yüklenmesini yavaşlatır. Oluşturma Engelleme CSS bölümüne bakın.
  • Kullanıcı sayfaya bir mobil cihazdan erişirse ekstra kod, mobil verilerini kullanmaları gerekir.

Kapsam panelini aç

  1. Komut menüsünü açın.

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

    Kapsam paneli.

Kod kapsamını kaydet

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 Engelleme başına'yı seçin.

  2. Kaydı başlatmak için yenile'yi tıklayın Enstrümantasyonu 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. Kod kapsamını kaydetmeyi durdurmak için stop_circle Kapsam enstrümantasyonunu durdur ve sonuçları göster seçeneğini tıklayın.

Kod kapsamını analiz etme

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

Bir satırı tıklayarak Kaynaklar panelinde bir kaynağı açın ve kullanılan kod ile kullanılmayan kodların satır satır dökümünü inceleyin. Kullanılmayan 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 ya da her ikisi de olabilir.
  • Toplam Bayt sütunu, kaynağın bayt cinsinden toplam boyutunu gösterir.
  • Kullanılmayan Baytlar sütunu, kullanılmayan bayt sayısıdır.
  • Adlandırılmamış son sütun, Toplam Bayt ve Kullanılmayan Baytlar sütunları. Çubuğun kırmızı bölümü kullanılmayan baytlardır. İlgili içeriği oluşturmak için kullanılan gri bölümde 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ğunda, kullanılan kodun yüzdesi gösterilir. Durum çubuğu, filtrelemeyi dikkate alır.

Filtre çubuğunun yanındaki açılır listeden, raporunuzda Tümü veya yalnızca CSS ya da JavaScript'i seçebilirsiniz.

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

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