Panel Zasięg w Narzędziach deweloperskich w Chrome pomaga znaleźć nieużywany kod JavaScript i CSS. Usunięcie niewykorzystanego kodu może przyspieszyć wczytywanie strony i zaoszczędzić mobilną transmisję danych.
Przegląd
Częstym problemem podczas tworzenia stron internetowych jest dostawa nieużywanego kodu JavaScript lub CSS. Załóżmy np., ż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:
...
<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 kod CSS wszystkich komponentów Bootstrap. ale nie używasz żadnych innych komponentów wczytywania. Pobieramy więc niepotrzebne kody CSS. Ten dodatkowy kod CSS może powodować problemy z następujących powodów:
- Dodatkowy kod spowalnia wczytywanie strony. Zobacz Kod CSS blokujący renderowanie.
- Jeśli użytkownik otwiera stronę na urządzeniu mobilnym, dodatkowy kod wykorzystuje mobilną transmisję danych.
Otwórz panel Zasięg
- Otwórz menu poleceń.
Zacznij wpisywać
coverage, wybierz polecenie Pokaż zasięg i naciśnij Enter, aby je uruchomić. Panel Stan otworzy się w panelu.
Zarejestruj zasięg kodu
Aby zarejestrować pokrycie kodu:
Aby ustawić zakres zakresu, na pasku działań u góry panelu Stan wybierz z listy Na funkcję lub Na blok.
Aby rozpocząć nagrywanie, kliknij Odśwież Rozpocznij instrumentowanie i załaduj ponownie stronę. Panel Stan ponownie wczyta stronę, przechwyci kod wymagany do wczytania strony i nadal będzie nagrywać, gdy będziesz z niej korzystać.
Aby zatrzymać rejestrowanie pokrycia kodu, kliknij stop_circle Zatrzymaj instrumentację i pokaż wyniki.
Analizowanie zasięgu kodu
Tabela w panelu Zasięg zawiera informacje o analizowanych zasobach i ilości kodu wykorzystanego w poszczególnych zasobach.
Kliknij wiersz, aby otworzyć dany zasób w panelu Źródła i wyświetlić poszczególne wiersze wykorzystanego kodu oraz nieużywanego kodu. Niewykorzystane wiersze kodu są oznaczone czerwonymi liniami obok kolumny z numerami wierszy po lewej stronie.
- Kolumna URL zawiera adres URL zasobu, który został poddany analizie.
- Kolumna Typ informuje, czy zasób zawiera kod CSS, JavaScript czy oba.
- Kolumna Łączna liczba bajtów podaje łączny rozmiar zasobu w bajtach.
- Kolumna Nieużywane bajty podaje liczbę bajtów, które nie zostały użyte.
- Ostatnia (nienazwana) kolumna to wizualizacja kolumn Łączna liczba bajtów i Nieużywane bajty. Czerwona część paska nie zawiera nieużywanych bajtów. Szara sekcja to bajty.
Aby filtrować raport według adresu URL, określ go w filtrze na pasku działań.
Pasek stanu u dołu panelu Stan pokazuje procent wykorzystania kodu. Na pasku stanu jest brane pod uwagę filtrowanie.
Obok paska filtrów wybierz na liście Wszystkie albo tylko CSS lub JavaScript, które mają być wyświetlane w raporcie.
Aby umieścić w raporcie kod rozszerzenia, włącz skrypty treści check_box.
Aby wyeksportować raport, kliknij Pobierz Zasięg eksportu.