Usuń nieużywany kod.

npm ułatwia dodawanie kodu do projektu. Ale czy naprawdę używasz tych dodatkowych bajtów?

Rejestry takie jak npm zmieniły świat JavaScriptu na lepsze, umożliwiając każdemu łatwe pobieranie i używanie ponad pół miliona publicznych pakietów. 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. 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 przykład na największe wyrenderowanie treści może mieć wpływ nieużywany kod, gdy większa rywalizacja o przepustowość wynikająca z nadmiernego wyrenderowania zasobów. Na LCP może też wpływać, jeśli duże zasoby JavaScript, które renderują znaczniki wyłącznie na kliencie, zawierają odwołania do kandydatów LCP przez opóźnienie w ładowaniu tych zasobów.

Nieużywany kod również może mieć wpływ na opóźnienie po pierwszej interakcji (FID) i Interaction to Next Paint (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 ładowaniu zasobów, wykorzystaniu pamięci i aktywności w wątku głównym, co przekłada się na słabą responsywność strony.

Ten przewodnik pomoże Ci zrozumieć nieużywany kod projektu, pokazując, jak analizować bazę kodu projektu. Przedstawia również strategie usuwania nieużywanego kodu z zasobów JavaScript wysyłanych do użytkowników w środowisku produkcyjnym.

Analizowanie pakietu

Narzędzia deweloperskie ułatwiają sprawdzenie rozmiaru wszystkich żądań sieciowych:

  1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  2. Kliknij kartę Sieć.
  3. Zaznacz pole wyboru Wyłącz pamięć podręczną.
  4. Odśwież stronę.

Panel sieci z żądaniem pakietu

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

Jeśli określisz pełną konfigurację Lighthouse w interfejsie wiersza poleceń węzła, możesz skorzystać z kontroli „Unused JavaScript” (Nieużywany JavaScript), aby śledzić, ile nieużywanego kodu jest wysyłane z aplikacją.

Kontrola nieużywanego kodu JavaScript w Lighthouse

Jeśli 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

Dzięki tej wizualizacji możesz sprawdzić, które części pakietu są większe od innych, a także uzyskać więcej informacji o importowanych bibliotekach. Może to pomóc w określeniu, czy używasz nieużywanych lub niepotrzebnych 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';

Trzeba podkreślić, że w przypadku większych aplikacji ten proces jest znacznie bardziej skomplikowany.

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 importowanie 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, zastanów się, czy można ją leniwie ładować.

Jeśli korzystasz z pakietu Webpack, sprawdź listę wtyczek, które automatycznie usuwają nieużywany kod z popularnych bibliotek.

Usuń niepotrzebne biblioteki

Nie wszystkie biblioteki da się łatwo podzielić na części i selektywnie importować. W takich sytuacjach zastanów się, czy można ją całkowicie usunąć. Zawsze warto rozważyć stworzenie własnego rozwiązania lub skorzystanie z lżejszego rozwiązania. Przed całkowitym usunięciem biblioteki z aplikacji należy wziąć pod uwagę złożoność i wysiłek potrzebny do wykonania każdego z tych działań.