NGXS cu pluginul HMR

Introducere

Hot Module Replacement (HMR) este o caracteristică Webpack pentru a actualiza codul într-o aplicație care rulează fără a o reconstrui. Acest lucru are ca rezultat actualizări mai rapide și mai puține reîncărcări complete ale paginilor. Puteți citi mai multe despre HMR vizitând „această pagină”.

Cum functioneazã?

HMR este o modalitate de a schimba module într-o aplicație care rulează (și de a adăuga/elimina module). Practic, puteți actualiza modulele modificate fără o reîncărcare completă a paginii.

Din vizualizarea aplicației

Codul aplicației solicită runtime HMR să verifice actualizările. Runtime HMR descarcă actualizările (async) și spune codului aplicației că este disponibilă o actualizare. Codul aplicației solicită runtime HMR să aplice actualizări. Runtime HMR aplică actualizările (sincronizare). Codul aplicației poate necesita sau nu interacțiunea utilizatorului în acest proces (voi decideți).

Din vizualizarea compilatorului webpack

În plus față de activele normale, compilatorul trebuie să emită „Actualizare” pentru a permite actualizarea de la o versiune anterioară la această versiune. „Actualizarea” conține două părți:

1. Actualizați manifestul (json)
2. Una sau mai multe bucăți de actualizare (js)

Manifestul conține noul hash de compilare și o listă cu toate fragmentele de actualizare. Bucățile de actualizare conțin cod pentru toate modulele actualizate din această bucată (sau un semnalizator dacă un modul a fost eliminat). În plus, compilatorul se asigură că ID-urile modulelor și ale fragmentelor sunt consecvente între aceste versiuni. Folosește un fișier json „înregistrează” pentru a le stoca între versiuni (sau le stochează în memorie).

Din vizualizarea modulului

HMR este opțiunea, deci afectează numai modulele care conțin codul HMR. Documentația descrie API-ul disponibil în module. În general, dezvoltatorul de module scrie handlere care sunt apelate atunci când o dependență a acestui modul este actualizată. De asemenea, pot scrie un handler care este apelat atunci când acest modul este actualizat. În cele mai multe cazuri, nu este obligatoriu să scrieți codul HMR în fiecare modul. Dacă un modul nu are handler HMR, actualizarea apare. Aceasta înseamnă că un singur handler poate gestiona actualizările pentru un arbore de module complet. Dacă un singur modul din acest arbore este actualizat, arborele complet al modulelor este reîncărcat (numai reîncărcat, nu transferat).

Din vizualizarea HMR runtime

Este emis un cod suplimentar pentru timpul de rulare a sistemului modulului pentru a urmări modulul parents și children. Pe partea de management, runtime-ul acceptă două metode: check și apply.

Un check face o solicitare HTTP către manifestul de actualizare. Când această solicitare eșuează, nu există nicio actualizare disponibilă. În rest, lista de fragmente actualizate este comparată cu lista de fragmente încărcate în prezent. Pentru fiecare bucată încărcată, se descarcă fragmentul de actualizare corespunzător. Toate actualizările modulelor sunt stocate în timpul de execuție ca actualizări. Timpul de execuție trece în starea ready, ceea ce înseamnă că o actualizare a fost descărcată și este gata să fie aplicată.

Pentru fiecare cerere nouă de bucată în starea pregătită, se descarcă și fragmentul de actualizare.

Metoda apply semnalează toate modulele actualizate ca nevalide. Pentru fiecare modul nevalid, trebuie să existe un handler de actualizare în modul sau un handler de actualizare în fiecare părinte. În caz contrar, invalidul apare și marchează și toți părinții ca invalidi. Acest proces continuă până când nu mai apare „bubble up”. Dacă bule până la un punct de intrare, procesul eșuează.

Acum toate modulele nevalide sunt eliminate (dispose handler) și descărcate. Apoi hash-ul curent este actualizat și toți gestionanții „acceptați” sunt apelați. Timpul de rulare revine la starea idle și totul continuă ca în mod normal.

Activarea HMR în Angular

Pentru a face HMR să lucreze cu Angular CLI, trebuie mai întâi să adăugăm un nou mediu și să-l activăm. În continuare, trebuie să actualizăm procesul de bootstrap al aplicației noastre pentru a activa modulul @angularclass/hmr.

Adăugați mediu pentru HMR

Creați un fișier numit src/environments/environment.hmr.ts cu următorul conținut:

Actualizați src/environments/environment.prod.ts și adăugați indicatorul hmr: false în mediu:

Actualizați src/environments/environment.ts și adăugați indicatorul hmr: false în mediu:

Actualizați angular.json pentru a include un mediu hmr așa cum este explicat „aici” și pentru a adăuga configurații în build și pentru a activa hmr. Rețineți că <project-name> aici reprezintă numele proiectului la care adăugați această configurație în angular.json.

Adăugați tipurile necesare la src/tsconfig.app.json

Rulați ng serve cu indicatorul --configuration hmr pentru a activa hmr și selectați noul mediu: $ ng serve --configuration hmr

Creați o comandă rapidă pentru aceasta actualizând package.json și adăugând o intrare la obiectul script:

"scripts": {
  ...
  "hmr": "ng serve --configuration hmr"
}

Adăugați dependență pentru @angularclass/hmr și configurați aplicația

Pentru ca HMR să funcționeze, trebuie să instalăm dependența și să ne configuram aplicația să o utilizeze. Instalați modulul @angularclass/hmr ca dependență de dezvoltare: $ npm install @angularclass/hmr --save-dev

Creați un fișier numit src/hmr.ts cu următorul conținut:

Actualizați src/main.ts pentru a utiliza fișierul pe care tocmai l-am creat:

Pornirea mediului de dezvoltare cu HMR activat

Acum că totul este configurat, putem rula noua configurație:

$ npm run hmr

Problemă

De fapt, nu există o reîncărcare la cald în Angular. Acest lucru părea a fi promițător, dar după ce am încercat un test simplu, acesta nu face de fapt o reîncărcare adevărată a modulului.

În mod implicit, HMR pierde automat starea, indiferent de cadru pe care îl utilizați, cu excepția cazului în care utilizați ceva precum starea Redux. Deci da, este un comportament implicit, fără griji!

Păstrați starea în timpul reîncărcării la cald

Pentru ca HMR să funcționeze după cum este necesar, așa cum echipa noastră a dezvoltat un plugin. La numărul de astăzi, pluginul este în versiune beta, așa că îl puteți instala în felul acesta:

$ npm install @ngxs/hmr-plugin --save-dev

Lansarea oficială este planificată în versiunea 3.4.0.

Ce urmeaza

Trebuie doar să faceți următoarele: eliminați fișierul hmr.ts și actualizați main.ts:

Bucurați-vă de HMR cu NGXS

Cum functioneazã?

Ciclul de viață NGXS HMR

Dacă doriți să faceți unele modificări la starea în timpul ciclului de viață hmr, puteți utiliza aceste acțiuni încorporate. Nu vor fi executate în producție.