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. Ale często włączamy biblioteki, z których nie korzystamy 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
Usuwając nieużywany kod, możesz poprawić podstawowe wskaźniki internetowe swojej witryny. Największy wyrenderowany element treści może na przykład być zależny od nieużywanego kodu, 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ż mieć wpływ na interakcję z następnym wyrenderowaniem (INP), bo nawet nieużywany kod JavaScript trzeba pobrać, przeanalizować, skompilować i wykonać. 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 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 webpacka 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 pakietu.
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 poznać liczbę i rozmiar bibliotek importowanych przez Twoją aplikację. Dzięki temu możesz sprawdzić, czy nie używasz nieużywanych lub niepotrzebnych bibliotek.
Usuwanie nieużywanych bibliotek
Na poprzednim obrazie drzewa w jednej domenie @firebase znajduje się całkiem 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.
Usuń niepotrzebne biblioteki
Nie wszystkich bibliotek można podzielić na części i selektywnie zaimportować. 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. Przed całkowitym usunięciem biblioteki z aplikacji należy jednak wziąć pod uwagę złożoność i nakłady pracy wymagane w przypadku każdej z tych strategii.