Rejestry takie jak npm zmieniły świat JavaScriptu na lepsze, umożliwiając każdemu pobieranie i używanie ponad pół miliona publicznych pakietów. Często jednak uwzględniamy biblioteki, których nie używamy w pełni. Aby rozwiązać ten problem, przeanalizuj pakiet pod kątem nieużywanego kodu, a potem usuń nieużywane i niepotrzebne biblioteki.
Wpływ na podstawowe wskaźniki internetowe
Usunięcie nieużywanego kodu może poprawić podstawowe wskaźniki internetowe Twojej witryny. Na przykład na największy wyrenderowany element 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ż mieć wpływ to, że duże zasoby JavaScriptu, które renderują znaczniki tylko po stronie klienta, zawierają odwołania do kandydatów LCP, opóźniając w ten sposób wczytywanie tych zasobów.
Nieużywany kod może też wpływać na interaktywność do kolejnego wyrenderowania (INP), ponieważ nawet nieużywany kod JavaScript musi zostać pobrany, przeanalizowany, skompilowany, a następnie wykonany. Nieużywany kod może powodować niepotrzebne opóźnienia w czasie wczytywania zasobów, wykorzystania pamięci i aktywności wątku głównego, co wpływa na słabą responsywność strony.
Z tego przewodnika dowiesz się, jak analizować kod źródłowy projektu pod kątem nieużywanego kodu, a także poznasz strategie usuwania nieużywanego kodu z komponentów JavaScriptu, które wysyłasz do użytkowników w wersji produkcyjnej.
Analizowanie pakietu
Narzędzia dla programistów mogą pokazywać rozmiar wszystkich żądań sieciowych:
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Sieć.
- Zaznacz pole wyboru Disable cache (Wyłącz pamięć podręczną).
- Odśwież stronę.
Karta Pokrycie w DevTools informuje też, ile kodu CSS i JS w aplikacji jest nieużywanych.
Po określeniu pełnej konfiguracji Lighthouse za pomocą interfejsu wiersza poleceń Node możesz uruchomić audyt dotyczący nieużywanego kodu JavaScript, aby sprawdzić, ile nieużywanego kodu jest dostarczane z Twoją aplikacją.
Jeśli używasz webpack jako narzędzia do tworzenia pakietów, analizator pakietów Webpack pomoże Ci sprawdzić, z czego składa się pakiet. Dodaj wtyczkę do pliku konfiguracji webpacka tak samo jak każdą inną wtyczkę:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Chociaż webpack jest często używany do tworzenia aplikacji jednostronicowych, inne narzędzia do tworzenia pakietów, takie jak Parcel i Rollup, również mają narzędzia do wizualizacji, których możesz używać do analizowania pakietów.
Po ponownym załadowaniu aplikacji z tym wtyczką zobaczysz mapę drzewiastą całego pakietu, którą można powiększać.
Ta wizualizacja pokazuje, które części pakietu są większe od innych, dzięki czemu możesz lepiej zrozumieć liczbę i rozmiar bibliotek importowanych przez aplikację. Dzięki temu możesz sprawdzić, czy nie używasz nieużywanych lub niepotrzebnych bibliotek.
Usuwanie nieużywanych bibliotek
Na poprzednim obrazie mapy drzewa widać, że w ramach jednej domeny @firebase znajduje się 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';
Jeśli masz jakiś tajemniczy pakiet, o którym wiesz, że na pewno nigdzie nie jest używany, cofnij się i sprawdź, które zależności najwyższego poziomu go używają. Spróbuj znaleźć sposób na zaimportowanie z niego tylko potrzebnych komponentów. Jeśli nie używasz biblioteki, usuń ją. Jeśli biblioteka nie jest wymagana do początkowego wczytania strony, rozważ jej lazy loading.
Jeśli używasz webpacka, zapoznaj się z listą wtyczek, które automatycznie usuwają nieużywany kod z popularnych bibliotek.
Usuwanie niepotrzebnych bibliotek
Nie wszystkie biblioteki można podzielić na części i importować selektywnie. W takich sytuacjach zastanów się, czy nie lepiej całkowicie usunąć bibliotekę. Warto rozważyć stworzenie rozwiązania niestandardowego lub skorzystanie z lżejszego rozwiązania. Zanim całkowicie usuniesz bibliotekę z aplikacji, zastanów się jednak nad złożonością i wysiłkiem wymaganym w przypadku każdej z tych strategii.