Nieużywany kod JavaScript może spowolnić wczytywanie strony:
- Jeśli JavaScript blokuje renderowanie, przeglądarka musi pobrać, przeanalizować, skompilować i ocenić skrypt, zanim będzie mógł wykonać inne czynności wymagane do wyrenderowania strony.
- Nawet jeśli kod JavaScript jest asynchroniczny (nie blokuje renderowania), podczas pobierania konkuruje o przepustowość z innymi zasobami, co ma znaczny wpływ na wydajność. Wysyłanie nieużywanego kodu przez sieć jest niepotrzebne w przypadku użytkowników urządzeń mobilnych, którzy nie mają nieograniczonej transmisji danych.
Co się dzieje, gdy kontrola nieużywanego kodu JavaScript kończy się niepowodzeniem
Lighthouse oznacza każdy plik JavaScript zawierający ponad 20 kibibajtów nieużywanego kodu:
![zrzut ekranu z kontroli.](https://developer.chrome.google.cn/static/docs/lighthouse/performance/unused-javascript/image/a-screenshot-the-audit-5e55ec7ebbacf.jpg?authuser=9&hl=pl)
Jak usunąć nieużywany JavaScript
Wykrywanie nieużywanego kodu JavaScript
Na karcie Zasięg w Narzędziach deweloperskich w Chrome możesz wyświetlić szczegółowe zestawienie nieużywanego kodu w poszczególnych wierszach.
Klasa Coverage
w Puppeteer pomaga zautomatyzować proces wykrywania nieużywanego kodu i wyodrębniania go.
Narzędzie do tworzenia do usuwania niewykorzystanego kodu
Wykonaj te testy Tooling.Report, aby dowiedzieć się, czy Twój program do tworzenia pakietów obsługuje funkcje, które ułatwiają unikanie lub usuwanie nieużywanego kodu:
Wskazówki dotyczące stosu
Angular
Jeśli używasz interfejsu wiersza poleceń Angular, dołącz do kompilacji produkcyjnej mapy źródeł w celu sprawdzenia pakietów.
Drupal
Rozważ usunięcie nieużywanych zasobów JavaScript i dołączenie bibliotek Drupala tylko do tych stron lub komponentów na stronach, które są potrzebne. Szczegółowe informacje znajdziesz w sekcji Definiowanie biblioteki.
Joomla
Dobrym pomysłem jest ograniczenie liczby rozszerzeń Joomli wczytujących na stronie nieużywany kod JavaScript albo zmiana tych wtyczek na inne.
Magento
Wyłącz wbudowane grupowanie JavaScriptu w Magento.
Dodaj reakcję
Jeśli nie korzystasz z renderowania po stronie serwera, podziel pakiety JavaScript między React.lazy()
.
W przeciwnym razie podziel kod za pomocą biblioteki innej firmy, takiej jak loadable-components.
Vue
Jeśli nie korzystasz z renderowania po stronie serwera i korzystasz z routera Vue, podziel pakiety według tras leniwego ładowania.
WordPress
Rozważ ograniczenie liczby wtyczek WordPress wczytujących na stronie nieużywany kod JavaScript albo zmiana tych wtyczek na inne.
Zasoby
- Kod źródłowy kontroli Usuwanie nieużywanego kodu
- Usuwanie nieużywanego kodu
- Dodawanie funkcji interaktywnej w języku JavaScript
- Podział kodu
- Eliminacja martwego kodu
- Martwy zaimportowany kod
- Znajdź nieużywany kod JavaScript i CSS na karcie Zasięg w Narzędziach deweloperskich w Chrome
- klasa:
Coverage