Usuń nieużywany kod JavaScript

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.
Kliknij wartość w kolumnie URL, aby otworzyć kod źródłowy skryptu w nowej karcie.

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