Pokrycie: znajdowanie nieużywanego kodu JavaScript i CSS

Kayce Basques
Kayce Basques

Na karcie Zasięg w Narzędziach deweloperskich w Chrome możesz znaleźć nieużywany kod JavaScript i CSS. Usunięcie nieużywanego kodu może przyspieszyć wczytywanie strony i zaoszczędzić komórkową transmisję danych użytkowników.

Analizuję zasięg kodu.
Rysunek 1. Analizuję zasięg kodu.

Opis

Częstym problemem podczas tworzenia stron internetowych jest przesyłanie nieużywanego kodu JavaScript lub CSS. Załóżmy na przykład, że na stronie chcesz użyć komponentu przycisku wczytywania. Aby użyć komponentu przycisku, musisz dodać w kodzie HTML link do arkusza stylów Bootstrap, podobny do tego:

...
<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>
...

Ten arkusz stylów zawiera nie tylko kod komponentu przycisku. Zawiera on kod CSS wszystkich komponentów Bootstrap. Ale nie używasz żadnych innych komponentów wczytywania. Twoja strona pobiera kilka plików CSS, których nie potrzebuje. Dodatkowa usługa porównywania cen sprawia, że:

  • Dodatkowy kod spowalnia wczytywanie strony. Zobacz Kod CSS blokujący renderowanie.
  • Jeśli użytkownik otwiera stronę na urządzeniu mobilnym, dodatkowy kod wykorzystuje komórkową transmisję danych.

Otwórz kartę Zasięg

  1. Otwórz menu poleceń.
  2. Zacznij wpisywać coverage, wybierz polecenie Pokaż zakres i naciśnij Enter, aby je uruchomić. Karta Stan otworzy się w panelu.
Karta Zasięg.
Rysunek 2. Karta Stan.

Rejestrowanie pokrycia kodu

  1. Kliknij jeden z tych przycisków na karcie Stan:
    • Kliknij Rozpocznij korzystanie z narzędzi do zarządzania zasięgiem i załaduj ponownie stronę Wczytaj jeszcze raz Jeśli chcesz sprawdzić, jaki kod jest potrzebny do wczytania strony.
    • Kliknij Pokrycie instrumentu Nagraj, jeśli chcesz zobaczyć, jaki kod jest używany po interakcji ze stroną.
  2. Kliknij Zatrzymaj instrumentację i pokaż wyniki Zatrzymaj, jeśli chcesz zatrzymać rejestrowanie pokrycia kodu.

Analiza zasięgu kodu

Tabela na karcie Stan zawiera informacje o tym, które zasoby zostały przeanalizowane, oraz w jakim stopniu kod został wykorzystany w poszczególnych zasobach. Kliknij wiersz, aby otworzyć dany zasób w panelu Źródła i wyświetlić poszczególne wiersze wykorzystanego i nieużywanego kodu. Nieużywane wiersze kodu będą oznaczone na początku czerwoną linią.

Raport pokrycia kodu.
Rysunek 3. Raport pokrycia kodu.
  • W kolumnie URL podany jest adres URL analizowanego zasobu.
  • Kolumna Typ informuje, czy zasób zawiera kod CSS, JavaScript czy oba te elementy.
  • Kolumna Łączna liczba bajtów zawiera łączny rozmiar zasobu w bajtach.
  • Kolumna Nieużywane bajty zawiera liczbę nieużywanych bajtów.
  • Ostatnia kolumna bez nazwy to wizualizacja kolumn Łączna liczba bajtów i Nieużywane bajty. Czerwona część słupka zawiera nieużywane bajty. Sekcja zielona zawiera bajty.