Usuń nieużywany kod.

Houssein Djirdeh

Dzięki tym ćwiczeniom w Codelabs możesz zwiększyć wydajność poniższej aplikacji przez usuwając wszystkie nieużywane i niepotrzebne zależności.

Zmierz odległość

Zawsze warto najpierw zmierzyć skuteczność strony, dodając optymalizacje.

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran

Kliknij ulubionego kota. Firebase Obecna wartość Baza danych czasu rzeczywistego: używane w tej aplikacji, dlatego wynik jest aktualizowany w czasie rzeczywistym i synchronizowane ze wszystkimi osobami korzystającymi z tej aplikacji. 🐈

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. Załaduj ponownie aplikację.

Aby załadować tę prostą aplikację, wysyła się prawie 1 MB kodu JavaScriptu!

Przejrzyj ostrzeżenia dotyczące projektu w Narzędziach deweloperskich.

• Kliknij kartę Console (Konsola).
• Sprawdź, czy opcja Warnings jest włączona w menu poziomów obok Dane wejściowe: Filter.

• Przyjrzyj się wyświetlonemu ostrzeżeniu.

Firebase, która jest jedną z bibliotek używanych w tej aplikacji, jest dobry Samritan, ostrzegając deweloperów, aby nie importować ale tylko te, które są używane. Innymi słowy, nieużywane biblioteki, które można usunąć w tej aplikacji, aby ją załadować szybciej.

Zdarzają się też sytuacje, gdy używana jest konkretna biblioteka, ale nie wszystkie prostszej alternatywy. Koncepcja usuwania zbędnych bibliotek to omówione w dalszej części tego samouczka.

Analizowanie pakietu

W aplikacji istnieją 2 główne zależności:

• Firebase: platforma oferująca szereg funkcji przydatnych usług dla aplikacji na iOS i Androida oraz aplikacji internetowych. Oto raport Czas rzeczywisty Baza danych jest używana do Zapisuj i synchronizuj dane dotyczące każdego kota w czasie rzeczywistym.
• Moment.js: biblioteka narzędziowa, która ułatwia obsługi dat w JavaScripcie. Data urodzenia każdego kota jest przechowywana w Baza danych Firebase, a aplikacja moment jest używana do obliczania swojego wieku w tygodniach.

W jaki sposób tylko 2 zależności mogą przyczynić się do wielkości pakietu prawie 1 MB? Cóż, Jednym z powodów jest to, że każda zależność może z kolei więc istnieje znacznie więcej niż tylko dwa, jeśli każdy zależność „drzewo” jest brany pod uwagę. Aplikacja może łatwo stać się duża, stosunkowo szybko przy wielu zależnościach.

Przeprowadź analizę działania usługi tworzącej pakiet, aby uzyskać lepsze pojęcie. Dostępnych jest wiele różne narzędzia społeczności, które mogą w tym pomóc, webpack-bundle-analyzer

Pakiet tego narzędzia jest już zawarty w aplikacji jako devDependency.

"devDependencies": {
  //...
  "webpack-bundle-analyzer": "^2.13.1"
},

Oznacza to, że można go używać bezpośrednio w pliku konfiguracji pakietu internetowego. Zaimportuj go na samym początku tego miesiąca (webpack.config.js):

const path = require("path");

//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

Teraz dodaj go jako wtyczkę na samym końcu pliku w tablicy plugins:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
};

Po ponownym załadowaniu aplikacji zobaczysz wizualizację całego pakiet zamiast samej aplikacji.

Nie tak urocze jak zobaczenie kociąt GDN, ale i tak bardzo pomocne. Najechanie kursorem na dowolną z pakietów pokazuje ich rozmiar przedstawiony w trzech obrazach. różne sposoby:

Narzędzie do analizowania pakietów internetowych pozwala łatwiej zidentyfikować nieużywane zbędnych pakietów, które stanowią duży odsetek pakietu.

Usuwanie nieużywanych pakietów

Wizualizacja pokazuje, że pakiet firebase składa się z dużej elementów niż zwykła baza danych. Zawiera dodatkowe pakiety, takie jak:

• firestore
• auth
• storage
• messaging
• functions

To świetne usługi oferowane przez Firebase (i odnosząc się do dokumentacja ), ale żaden z nich nie jest używany w aplikacji, nie ma powodu, by je importować.

Aby ponownie wyświetlić aplikację, cofnij zmiany w aplikacji webpack.config.js:

• Usuń wtyczkę BundleAnalyzerPlugin z listy wtyczek:

plugins: [
  //...
  new BundleAnalyzerPlugin()
];

• Teraz usuń nieużywany import z góry pliku:

const path = require("path");

//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Aplikacja powinna teraz załadować się normalnie. Zmodyfikuj src/index.js, aby zaktualizować importach z Firebase.

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

Teraz podczas ponownego ładowania aplikacji ostrzeżenie w Narzędziach deweloperskich się nie wyświetla. Otwieranie Panel Sieć w Narzędziach deweloperskich również pokazuje znaczne zmniejszenie rozmiaru pakietu:

Usunięto ponad połową rozmiaru pakietu. Firebase zapewnia wiele usług i umożliwia programistom uwzględnianie tylko tych, które są rzeczywiście niezbędną. W tej aplikacji do przechowywania i synchronizacji użyto tylko usługi firebase/database dla wszystkich danych. import firebase/app, który konfiguruje platformę API dla do korzystania z każdej z nich.

Wiele innych popularnych bibliotek, takich jak lodash, umożliwia programistom i selektywnie importować różne części swoich pakietów. Bez dużej pracy zaktualizowanie importów bibliotek w aplikacji tak, aby uwzględniały tylko używane elementy może znacznie poprawić wydajność.

Chociaż rozmiar pakietu został znacznie zmniejszony, dużo pracy do zrobienia! 😈

Usuwanie zbędnych pakietów

W przeciwieństwie do Firebase elementów z biblioteki moment nie można importować jako ale może da się je całkowicie usunąć?

Urodziny każdego uroczego kotka jest przechowywane w formacie Unix (milisekundy) w w bazie danych Firebase.

Jest to sygnatura czasowa konkretnej daty i godziny przedstawiona za pomocą liczby które upłynęły od 1 stycznia 1970 r., godz. 00:00 czasu UTC. Jeśli bieżący datę i godzinę można obliczyć w tym samym formacie, czyli małą funkcję do znalezienia można określić wiek kota podany w tygodniach.

Jak zawsze, postaraj się nie kopiować i wklejać treści, które widzisz tutaj. Zacznij od usuwasz moment z importów w src/index.js.

import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';

W naszej bazie danych dostępny jest detektor zdarzeń Firebase, który obsługuje zmiany wartości:

favoritesRef.on("value", (snapshot) => { ... })

Powyżej dodaj małą funkcję, aby obliczyć liczbę tygodni z podana data:

const ageInWeeks = birthDate => {
  const WEEK_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 7;
  const diff = Math.abs((new Date).getTime() - birthDate);
  return Math.floor(diff / WEEK_IN_MILLISECONDS);
}

W przypadku tej funkcji różnica w milisekundach między bieżącą datą a godzina (new Date).getTime() i data urodzenia (argument birthDate jest już w milisekundach) jest obliczany i podzielony przez liczbę milisekund w tygodnia.

Wszystkie wystąpienia parametru moment można też usunąć z detektora zdarzeń: wykorzystując tę funkcję:

favoritesRef.on("value", (snapshot) => {
  const { kitties, favorites, names, birthDates } = snapshot.val();
  favoritesScores = favorites;

  kittiesList.innerHTML = kitties.map((kittiePic, index) => {
    const birthday = moment(birthDates[index]);

    return `
      <li>
        <img src=${kittiePic} onclick="favKittie(${index})">
        <div class="extra">
          <div class="details">
            <p class="name">${names[index]}</p>
            <p class="age">${moment().diff(birthday, 'weeks')} weeks old</p>
            <p class="age">${ageInWeeks(birthDates[index])} weeks old</p>
          </div>
          <p class="score">${favorites[index]} ❤</p>
        </div>
      </li>
    `})
});

Teraz załaduj ponownie aplikację i jeszcze raz przyjrzyj się panelowi Network (Sieć).

Rozmiar naszego pakietu ponownie został zmniejszony o ponad połowę.

Podsumowanie

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak analizować konkretnego pakietu i wyjaśnienie, dlaczego warto je usunąć, przesyłek. Przed rozpoczęciem optymalizacji aplikacji za pomocą tej metody zastanów się, trzeba pamiętać, że może to być znacznie bardziej skomplikowane, aplikacji.

Jeśli chodzi o usuwanie nieużywanych bibliotek, spróbuj dowiedzieć się, które części które pakiety są używane, a które nie. Tajemnicze spojrzenie wygląda na to, że nie jest nigdzie używany, zrób krok w tył i sprawdź, czy które zależności najwyższego poziomu mogą jej potrzebować. Spróbuj znaleźć sposób, aby oddzielać je od siebie.

Jeśli chodzi o usuwanie zbędnych bibliotek, nie jest to konieczne. skomplikowane. Konieczna jest ścisła współpraca z zespołem i sprawdzanie, czy do uproszczenia części bazy kodu. Usuwam moment z tego aplikacja może wydawać się słuszną rzeczą za każdym razem, ale co czy istniały strefy czasowe i regiony wymagające obsługi? lub A co, jeśli doszło do bardziej skomplikowanych modyfikacji dat? Efekty działań stają się podczas analizowania dat i godzin oraz korzystania z bibliotek takich jak moment. i date-fns znacznie to upraszczają.

Wszystko przynosi kompromis, dlatego trzeba ocenić, czy warto ze względu na złożoność i wysiłek związany z wdrożeniem niestandardowego rozwiązania, zamiast polegać na za pomocą biblioteki zewnętrznej.