Rejestry takie jak npm zmieniły świat JavaScriptu na lepsze, umożliwiając każdemu pobieranie i używanie ponad pół miliona pakietów publicznych. Często jednak uwzględniamy biblioteki, z których nie korzystamy w pełni. Aby rozwiązać ten problem, przeanalizuj pakiet pod kątem nieużywanego kodu, a następnie usuń używane i niepotrzebne biblioteki.
Wpływ na podstawowe wskaźniki internetowe
Usuwając nieużywany kod, możesz poprawić jej podstawowe wskaźniki internetowe. Na największe wyrenderowanie treści może mieć wpływ nieużywany kod, gdy niepotrzebnie duże zasoby konkurują o przepustowość z innymi zasobami. Na LCP może też wpływać, jeśli duże zasoby JavaScript renderujące znaczniki tylko na kliencie zawierają odwołania do kandydatów LCP przez opóźnienie w ładowaniu tych zasobów.
Nieużywany kod może też wpływać na interakcję z następnym renderowaniem (INP), ponieważ nawet nieużywany kod JavaScript musi zostać pobrany, analizowany, skompilowany, a następnie wykonany. Nieużywany kod może powodować niepotrzebne opóźnienia w czasie wczytywania zasobów, wykorzystaniu pamięci i aktywności w wątku głównym, co powoduje słabą reagowanie stron.
Ten przewodnik wyjaśnia, jak analizować bazę kodu projektu pod kątem nieużywanego kodu. Przedstawia również strategie usuwania nieużywanego kodu z zasobów JavaScript, które wysyłasz do użytkowników w środowisku produkcyjnym.
Analizowanie pakietu
Narzędzia deweloperskie mogą pokazywać rozmiar wszystkich żądań sieciowych:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Zaznacz pole wyboru Wyłącz pamięć podręczną.
- Odśwież stronę.
Na karcie Zasięg w Narzędziach deweloperskich znajdziesz też informacje o tym, jaka część kodu CSS i JS w Twojej aplikacji nie jest używana.
Określając pełną konfigurację Lighthouse w interfejsie wiersza poleceń węzła, możesz uruchomić audyt Ogranicz niewykorzystany kod JavaScript, aby sprawdzić, ile niewykorzystanego kodu jest wysyłane wraz z aplikacją
Jeśli jako pakietu SDK używasz pakietu webpack, Analizator pakietów Webpack pomoże Ci sprawdzić, co składa się na pakiet. Dodaj wtyczkę do pliku konfiguracyjnego pakietu webpack, tak jak każda inna wtyczka:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Pakiet internetowy jest powszechnie używany do tworzenia aplikacji jednostronicowych, ale inne narzędzia do łączenia pakietów, takie jak Parcel i Rollup, również mają narzędzia do wizualizacji, których możesz użyć do analizy pakietu.
Ponowne wczytanie aplikacji z tym wtyczką spowoduje wyświetlenie mapy drzewa całego pakietu, którą można powiększyć.
Ta wizualizacja pokazuje, które części pakietu są większe od innych, dzięki czemu możesz lepiej poznać liczbę i rozmiar bibliotek importowanych przez Twoją aplikację. Może to pomóc w określeniu, czy używasz nieużywanych lub zbędnych bibliotek.
Usuń nieużywane biblioteki
Na poprzednim obrazie mapy w jednej domenie @firebase jest sporo pakietów. Jeśli Twoja witryna potrzebuje tylko komponentu bazy danych Firebase, zaktualizuj importy, aby pobrać tę bibliotekę:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Spójrzmy na tajemniczy pakiet, który na pewno nie jest nigdzie używany, i sprawdź, które z zależności najwyższego poziomu go używają. Poszukaj sposobu na zaimportowanie tylko tych komponentów, których potrzebujesz. Jeśli nie korzystasz z biblioteki, usuń ją. Jeśli biblioteka nie jest wymagana do początkowego wczytywania strony, możesz ją leniwie ładować.
Jeśli używasz pakietu internetowego, sprawdź listę wtyczek, które automatycznie usuwają nieużywany kod z popularnych bibliotek.
Usuń niepotrzebne biblioteki
Nie wszystkie biblioteki można podzielić na części i selektywnie importować. W takiej sytuacji zastanów się, czy możesz całkowicie usunąć bibliotekę. Zawsze warto rozważyć stworzenie niestandardowego rozwiązania lub wykorzystanie lżejszej alternatywy. Przed całkowitym usunięciem biblioteki z aplikacji należy wziąć pod uwagę złożoność i wysiłek każdej z tych strategii.