W rejestrach takich jak npm przekształciły świat JavaScriptu na lepsze, pozwalając każdemu pobierania i używania ponad pół miliona pakietów publicznych. Ale często uwzględniamy z bibliotek, które nie są w pełni używane. Aby rozwiązać ten problem, przeanalizuj pakiet aby wykryć nieużywany kod, a następnie usunąć nieużywane i niepotrzebne biblioteki.
Wpływ na podstawowe wskaźniki internetowe
Usuwając nieużywany kod, możesz poprawić Podstawowe wskaźniki internetowe. Największe wyrenderowanie treści, nieużywany kod może wpływać np. w przypadku niepotrzebnie dużych zasobów. konkurują o przepustowość z innymi zasobami. Na LCP może mieć wpływ również Zasoby JavaScript, które renderują znaczniki tylko na kliencie. zawierają odwołania do kandydatów LCP opóźniając wczytanie tych zasobów.
Niewykorzystany kod może też wpłynąć na interakcję z następnym wyrenderowaniem (INP), bo nawet nieużywany kod JavaScript trzeba pobrać, przeanalizować, skompilować, a następnie . Nieużywany kod może powodować niepotrzebne opóźnienia w ładowaniu zasobów czas, wykorzystanie pamięci i aktywność w głównym wątku, które przyczyniają się do niskiej jakości strony czas reakcji.
Ten przewodnik wyjaśnia, jak analizować bazę kodu projektu pod kątem nieużywanego kodu. zawiera strategie usuwania nieużywanego kodu z zasobów JavaScriptu, do których wysyłasz produkty. i innych użytkowników w środowisku produkcyjnym.
Analizowanie pakietu
Narzędzia deweloperskie mogą wyświetlić 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ę.
Karta Stan w Narzędzia deweloperskie informują również, ile kodu CSS i JS w aplikacji nie jest używane.
Określając pełną konfigurację Lighthouse za pomocą interfejsu wiersza poleceń węzła, możesz uruchomić Ogranicz nieużywany audyt JavaScript w celu śledzenia ilości wysyłanego nieużywanego kodu z Twoją aplikacją/
Jeśli używasz pakietu webpack jako pakietu, Analizator pakietów Webpack może pomóc w zbadaniu, co składa się na pakiet. Dodaj wtyczkę do swojego pliku konfiguracji pakietu internetowego, tak jak w przypadku każdej innej wtyczki:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Choć pakiet internetowy jest powszechnie używany do tworzenia aplikacji jednostronicowych, inne moduły pakietu, takie jak Parcel, podsumowania – udostępniają też narzędzia do wizualizacji, których możesz użyć do analizy pakietu.
Ponowne załadowanie aplikacji z dołączoną wtyczką pokazuje mapę drzewa, którą można powiększać cały pakiet.
Ta wizualizacja pokazuje, które części pakietu są większe od innych. Dzięki temu lepiej zrozumiesz liczbę i rozmiar bibliotek importowanych aplikacji. Pomoże Ci to określić, czy używasz niewykorzystanych lub zbędnych bibliotek.
Usuń nieużywane biblioteki
Na poprzednim obrazie mapy
@firebase. Jeśli Twoja witryna potrzebuje tylko komponentu bazy danych Firebase,
zaktualizuj operacje importowania, aby pobrać tę bibliotekę:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Tajemniczy pakiet, w przypadku którego masz pewność, że nie jest używany w dowolnym miejscu, cofnij się i sprawdź, które z zależności najwyższego poziomu za jego pomocą. Spróbuj znaleźć sposób na zaimportowanie tylko potrzebnych komponentów. Jeśli nie używasz biblioteki, usuń ją. Jeśli biblioteka nie jest wymagana przez początkowe wczytanie strony, rozważ leniwe ładowanie .
Jeśli używasz pakietu internetowego, sprawdź listę wtyczek, które automatycznie lub usuń z popularnych bibliotek nieużywany kod.
Usuń niepotrzebne biblioteki
Nie wszystkich bibliotek można podzielić na części i selektywnie zaimportować. W takiej sytuacji zastanów się, czy możesz całkowicie usunąć bibliotekę. Stworzenie własnego rozwiązania lub wykorzystanie lżejszej alternatywy zawsze powinno które warto rozważyć. Trzeba jednak wziąć pod uwagę złożoność wysiłek wymagany w ramach jednej z tych strategii przed usunięciem biblioteki całkowicie z aplikacji.