Pierwsze kroki: optymalizacja aplikacji Angular

Chcesz, aby Twoja witryna Angular była jak najszybsza i jak najbardziej dostępna? Jesteś we właściwym miejscu.

Angular to platforma do tworzenia interfejsów użytkownika. Udostępnia ono elementy, które ułatwiają szybkie skonfigurowanie skalowanej i łatwej w utrzymaniu aplikacji. Angular umożliwia programistom tworzenie aplikacji działających w internecie, na urządzeniach mobilnych i na komputerach.

Ta kolekcja skupia się na 5 głównych obszarach optymalizacji aplikacji Angular:

  • Poprawa wydajności aplikacji w celu zwiększenia liczby konwersji i zaangażowania użytkowników
  • Poprawianie niezawodności aplikacji w sieciach o słabej jakości przez wstępne zapisywanie zasobów za pomocą skryptu service worker Angular
  • Sprawianie, że aplikacja jest łatwo dostępna dla wyszukiwarek i botów mediów społecznościowych dzięki wstępnemu renderowaniu i renderowaniu po stronie serwera.
  • zainstalować, aby zapewnić użytkownikom wrażenia podobne do tych, jakie daje aplikacja na iOS lub Androida;

Każdy post w kolekcji będzie opisywać techniki, które możesz bezpośrednio zastosować w swoich aplikacjach.

Co nie znajduje się w tej kolekcji?

Ta kolekcja zakłada, że znasz już Angulara i TypeScripta. Jeśli nie czujesz się jeszcze pewnie, zapoznaj się z dokumentacją TypeScript oraz przewodnikiem Początkujący: Angular na stronie angular.io.

Rozpocznij projekt

Interfejs wiersza poleceń Angular (CLI) umożliwia szybkie skonfigurowanie prostej aplikacji Angular po stronie klienta. W tym poście znajdziesz krótkie wprowadzenie do interfejsu wiersza poleceń, a w kolejnych wpisach z tej kolekcji dowiesz się, jak dodać bardziej zaawansowane funkcje, takie jak renderowanie po stronie serwera i obsługa wdrażania.

Konfigurowanie interfejsu wiersza poleceń

Najpierw zainstaluj interfejs wiersza poleceń globalnie, a potem uruchom te polecenia, aby sprawdzić, czy masz najnowszą wersję:

npm i -g @angular/cli
ng
--version

Upewnij się, że ostatnie polecenie zwraca wersję 8.0.3 lub nowszą.

Jeśli nie chcesz instalować wiersza poleceń globalnie, możesz go zainstalować lokalnie i uruchomić za pomocą polecenia npx:

npm i @angular/cli
npx ng
--version

Tworzenie projektu

Aby utworzyć nowe uruchomienie projektu:

ng new my-app

To polecenie utworzy początkowe pliki i strukturę folderów aplikacji oraz zainstaluje potrzebne moduły węzła.

Po zakończeniu procesu konfiguracji uruchom aplikację:

cd my-app
ng serve

Teraz możesz uzyskać dostęp do aplikacji pod adresem http://localhost:4200.

Co dalej?

W dalszej części tej kolekcji dowiesz się, jak poprawić wydajność i pozycjonowanie aplikacji Angular. Co obejmuje:

  • Dzielenie kodu na poziomie przekierowań w Angular
  • Budżety wydajności za pomocą interfejsu wiersza poleceń Angulara
  • Strategie wstępnego pobierania tras w Angular
  • Zmień optymalizację wykrywania w Angular
  • Wirtualizacja dużych list za pomocą pakietu CDK Angular
  • Wstępne zapisywanie za pomocą skryptu service worker Angular
  • Wstępna renderyzacja tras za pomocą interfejsu wiersza poleceń Angular CLI
  • Renderowanie po stronie serwera za pomocą Angular Universal
  • Dodawanie pliku manifestu aplikacji internetowej za pomocą narzędzia wiersza poleceń Angular CLI