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ę.
![Panel sieci z żądaniem pakietu](https://web.dev/static/articles/remove-unused-code/image/network-panel-bundle-req-36193b2ae6002.png?authuser=1&hl=pl)
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.
![Zasięg kodu w Narzędziach deweloperskich](https://web.dev/static/articles/remove-unused-code/image/code-coverage-devtools-a8b97b7ad3f23.png?authuser=1&hl=pl)
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ą
![Lighthouse Ogranicz nieużywany kod JavaScript](https://web.dev/static/articles/remove-unused-code/image/lighthouse-unused-js-audi-944670cd819cc.png?authuser=1&hl=pl)
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ć.
![Analizator pakietów Webpack](https://web.dev/static/articles/remove-unused-code/image/webpack-bundle-analyzer-73bad0347b21.png?authuser=1&hl=pl)
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.