Wstęp
Wymiana modułu na gorąco (HMR) to funkcja pakietu internetowego umożliwiająca aktualizację kodu w działającej aplikacji bez jego przebudowywania. Skutkuje to szybszymi aktualizacjami i mniejszą liczbą przeładowań pełnych stron. Możesz przeczytać więcej o HMR odwiedzając tę stronę.
Jak to działa?
HMR to sposób na wymianę modułów w działającej aplikacji (oraz dodawanie/usuwanie modułów). Zasadniczo możesz aktualizować zmienione moduły bez ponownego ładowania całej strony.
Z widoku aplikacji
Kod aplikacji prosi środowisko wykonawcze HMR o sprawdzenie dostępności aktualizacji. Środowisko wykonawcze HMR pobiera aktualizacje (asynchronicznie) i informuje kod aplikacji, że aktualizacja jest dostępna. Kod aplikacji prosi środowisko wykonawcze HMR o zastosowanie aktualizacji. Środowisko wykonawcze HMR stosuje aktualizacje (synchronizacja). Kod aplikacji może, ale nie musi, wymagać interakcji użytkownika w tym procesie (ty decydujesz).
Z widoku kompilatora pakietu internetowego
Oprócz zwykłych zasobów kompilator musi wyemitować „Aktualizację”, aby umożliwić aktualizację z poprzedniej wersji do tej wersji. „Aktualizacja” składa się z dwóch części:
- Aktualizuj manifest (json)
- Jedna lub wiele fragmentów aktualizacji (js)
Manifest zawiera nowy skrót kompilacji i listę wszystkich fragmentów aktualizacji. Fragmenty aktualizacji zawierają kod dla wszystkich zaktualizowanych modułów w tym fragmencie (lub flagę, jeśli moduł został usunięty). Kompilator dodatkowo upewnia się, że identyfikatory modułów i porcji są spójne w tych kompilacjach. Używa pliku json „rekordów” do przechowywania ich pomiędzy kompilacjami (lub przechowuje je w pamięci).
Z widoku modułu
HMR jest funkcją opcjonalną, więc dotyczy tylko modułów zawierających kod HMR. Dokumentacja opisuje API dostępne w modułach. Ogólnie rzecz biorąc, twórca modułu zapisuje procedury obsługi, które są wywoływane, gdy aktualizowana jest zależność tego modułu. Mogą także napisać procedurę obsługi wywoływaną podczas aktualizacji tego modułu. W większości przypadków wpisywanie kodu HMR w każdym module nie jest obowiązkowe. Jeśli moduł nie ma programów obsługi HMR, aktualizacja pojawia się w bąbelkach. Oznacza to, że pojedynczy moduł obsługi może obsłużyć aktualizacje całego drzewa modułów. Jeśli pojedynczy moduł w tym drzewie zostanie zaktualizowany, całe drzewo modułów zostanie ponownie załadowane (tylko przeładowane, a nie przeniesione).
Z widoku środowiska wykonawczego HMR
Emitowany jest dodatkowy kod dla środowiska wykonawczego systemu modułów w celu śledzenia modułów parents i children. Po stronie zarządzania środowisko wykonawcze obsługuje dwie metody: check i apply.
check wysyła żądanie HTTP do manifestu aktualizacji. Jeśli to żądanie nie powiedzie się, aktualizacja nie będzie dostępna. W przeciwnym razie lista zaktualizowanych fragmentów jest porównywana z listą aktualnie załadowanych fragmentów. Dla każdego załadowanego fragmentu pobierany jest odpowiedni fragment aktualizacji. Wszystkie aktualizacje modułów są przechowywane w środowisku wykonawczym jako aktualizacje. Środowisko wykonawcze przechodzi w stan ready, co oznacza, że aktualizacja została pobrana i jest gotowa do zastosowania.
Dla każdego nowego żądania fragmentu w stanie gotowości pobierany jest także fragment aktualizacji.
Metoda apply oznacza wszystkie zaktualizowane moduły jako nieprawidłowe. Dla każdego nieprawidłowego modułu musi istnieć procedura obsługi aktualizacji w module lub procedury obsługi aktualizacji w każdym rodzicu. W przeciwnym razie informacja o nieważności pojawi się w postaci bąbelków i oznaczy wszystkich rodziców jako nieważnych. Proces ten trwa do momentu, aż przestaną pojawiać się „bąbelki”. Jeśli bąbelkuje aż do punktu wejścia, proces kończy się niepowodzeniem.
Teraz wszystkie nieprawidłowe moduły są usuwane (obsługa usuwania) i wyładowywane. Następnie bieżący hash jest aktualizowany i wywoływane są wszystkie procedury obsługi „accept”. Środowisko wykonawcze przełącza się z powrotem do stanu idle i wszystko przebiega normalnie.
Włączanie HMR w Angular
Aby HMR współpracował z Angular CLI, musimy najpierw dodać nowe środowisko i je włączyć. Następnie musimy zaktualizować proces ładowania naszej aplikacji, aby włączyć moduł @angularclass/hmr.
Dodaj środowisko dla HMR
Utwórz plik o nazwie src/environments/environment.hmr.ts z następującą zawartością:
Zaktualizuj src/environments/environment.prod.ts i dodaj flagę hmr: false do środowiska:
Zaktualizuj src/environments/environment.ts i dodaj flagę hmr: false do środowiska:
Zaktualizuj angular.json, aby uwzględnić środowisko hmr, jak wyjaśniono „tutaj”, i dodaj konfiguracje w ramach kompilacji i usługi, aby umożliwić hmr. Zauważ, że <project-name> tutaj reprezentuje nazwę projektu, do którego dodajesz tę konfigurację w angular.json.
Dodaj niezbędne typy do src/tsconfig.app.json
Uruchom ng serve z flagą --configuration hmr, aby włączyć hmr i wybrać nowe środowisko: $ ng serve --configuration hmr
Utwórz do tego skrót, aktualizując package.json i dodając wpis do obiektu skryptu:
"scripts": {
...
"hmr": "ng serve --configuration hmr"
}
Dodaj zależność dla @angularclass/hmr i skonfiguruj aplikację
Aby HMR działał, musimy zainstalować zależność i skonfigurować naszą aplikację do korzystania z niej. Zainstaluj moduł @angularclass/hmr jako zależność deweloperską: $ npm install @angularclass/hmr --save-dev
Utwórz plik o nazwie src/hmr.ts z następującą zawartością:
Zaktualizuj src/main.ts, aby użyć właśnie utworzonego pliku:
Uruchamianie środowiska programistycznego z włączoną funkcją HMR
Teraz, gdy wszystko jest skonfigurowane, możemy uruchomić nową konfigurację:
$ npm run hmr
Problem
Właściwie w Angularze nie ma prawdziwego gorącego przeładowania. Wydawało się to obiecujące, ale po wypróbowaniu prostego testu okazało się, że tak naprawdę nie jest to prawdziwe przeładowanie modułu na gorąco.
Domyślnie HMR automatycznie traci stan, bez względu na to, jakiego frameworka używasz, chyba że używasz czegoś takiego jak stan Redux. Więc tak, to domyślne zachowanie, nie martw się!
Zachowaj stan podczas gorącego przeładowania
Aby HMR działał zgodnie z potrzebami, nasz zespół opracował wtyczkę. Pod dzisiejszym numerem wtyczka jest w wersji beta, więc można ją zainstalować w następujący sposób:
$ npm install @ngxs/hmr-plugin --save-dev
Oficjalne wydanie planowane jest w wersji 3.4.0.
Co dalej
Musisz tylko wykonać następujące czynności: usunąć plik hmr.ts i zaktualizować plik main.ts:
Ciesz się swoim HMR z NGXS
Jak to działa?
Cykl życia NGXS HMR
Jeśli chcesz dokonać pewnych modyfikacji stanu podczas cyklu życia hmr, możesz skorzystać z tych wbudowanych akcji. Nie zostaną one wykonane w produkcji.
