Kirish
Hot Module Replacement (HMR) ishlayotgan ilovadagi kodni qayta tiklamasdan yangilash uchun Webpack xususiyatidir. Bu tezroq yangilanishlarga va kamroq to'liq sahifani qayta yuklashga olib keladi. HMR haqida ko'proq ma'lumotni ushbu sahifaga tashrif buyurib o'qishingiz mumkin.
Bu qanday ishlaydi?
HMR - bu ishlaydigan dasturda modullarni almashish (va modullarni qo'shish/o'chirish) usuli. Siz asosan o'zgartirilgan modullarni sahifani to'liq qayta yuklamasdan yangilashingiz mumkin.
Ilova ko'rinishidan
Ilova kodi yangilanishlarni tekshirish uchun HMR ish vaqtini so'raydi. HMR ish vaqti yangilanishlarni yuklab oladi (async) va ilova kodiga yangilanish mavjudligini aytadi. Ilova kodi yangilanishlarni qo'llash uchun HMR ish vaqtini so'raydi. HMR ish vaqti yangilanishlarni qo'llaydi (sinxronlash). Ilova kodi bu jarayonda foydalanuvchi shovqinini talab qilishi yoki talab qilmasligi mumkin (siz qaror qilasiz).
Veb-paket kompilyatori ko'rinishidan
Oddiy aktivlarga qo'shimcha ravishda, kompilyator oldingi versiyadan ushbu versiyaga yangilanishga ruxsat berish uchun "Yangilanish" ni chiqarishi kerak. "Yangilanish" ikki qismdan iborat:
- Manifestni yangilash (json)
- Bir yoki bir nechta yangilash qismlari (js)
Manifestda yangi kompilyatsiya xeshi va barcha yangilanish qismlari ro'yxati mavjud. Yangilash qismlari ushbu bo'lakdagi barcha yangilangan modullar uchun kodni o'z ichiga oladi (yoki modul o'chirilgan bo'lsa, bayroq). Kompilyator qo'shimcha ravishda modul va chunk identifikatorlari ushbu tuzilmalar o'rtasida mos kelishiga ishonch hosil qiladi. U ularni tuzilmalar orasida saqlash uchun "yozuvlar" json faylidan foydalanadi (yoki ularni xotirada saqlaydi).
Modul ko'rinishidan
HMR - bu variant xususiyati, shuning uchun u faqat HMR kodini o'z ichiga olgan modullarga ta'sir qiladi. Hujjatlar modullarda mavjud bo'lgan APIni tavsiflaydi. Umuman olganda, modul ishlab chiqaruvchisi ushbu modulga bog'liqlik yangilanganda chaqiriladigan ishlov beruvchilarni yozadi. Ular ushbu modul yangilanganda chaqiriladigan ishlov beruvchini ham yozishlari mumkin. Ko'pgina hollarda, har bir modulda HMR kodini yozish majburiy emas. Agar modulda HMR ishlov beruvchilari bo'lmasa, yangilanish pufakchaga chiqadi. Bu bitta ishlov beruvchi to'liq modul daraxti uchun yangilanishlarni boshqarishi mumkinligini anglatadi. Agar ushbu daraxtdagi bitta modul yangilangan bo'lsa, to'liq modul daraxti qayta yuklanadi (faqat qayta yuklanadi, o'tkazilmaydi).
HMR ish vaqti ko'rinishidan
parents va children modullarini kuzatish uchun modul tizimining ish vaqti uchun qo'shimcha kod chiqariladi. Boshqaruv tomonida ish vaqti ikkita usulni qo'llab-quvvatlaydi: check va apply.
check yangilanish manifestiga HTTP so'rovini bajaradi. Ushbu so'rov bajarilmasa, yangilanish mavjud bo'lmaydi. Aks holda, yangilangan qismlar ro'yxati hozirda yuklangan qismlar ro'yxati bilan taqqoslanadi. Har bir yuklangan bo'lak uchun mos yangilanish bo'lagi yuklab olinadi. Barcha modul yangilanishlari ish vaqtida yangilanishlar sifatida saqlanadi. Ish vaqti ready holatiga o'tadi, ya'ni yangilanish yuklab olingan va qo'llanilishiga tayyor.
Tayyor holatda bo'lgan har bir yangi bo'lak so'rovi uchun yangilanish qismi ham yuklab olinadi.
apply usuli barcha yangilangan modullarni yaroqsiz deb belgilaydi. Har bir yaroqsiz modul uchun modulda yangilanish ishlov beruvchisi yoki har bir ota-onada yangilanish ishlov beruvchisi bo'lishi kerak. Aks holda, noto'g'ri pufakcha paydo bo'ladi va barcha ota-onalarni ham yaroqsiz deb belgilaydi. Bu jarayon boshqa "qabariq" paydo bo'lmaguncha davom etadi. Agar u kirish nuqtasiga qadar pufakchalar paydo bo'lsa, jarayon muvaffaqiyatsiz tugadi.
Endi barcha noto'g'ri modullar utilizatsiya qilinadi (ishlab chiqaruvchini yo'q qilish) va tushiriladi. Keyin joriy xesh yangilanadi va barcha "qabul qilish" ishlov beruvchilari chaqiriladi. Ish vaqti idle holatiga qaytadi va hamma narsa odatdagidek davom etadi.
Angular-da HMR-ni yoqish
HMR-ning Angular CLI bilan ishlashi uchun avvalo yangi muhit qo'shishimiz va uni yoqishimiz kerak. Keyin @angularclass/hmr modulini yoqish uchun ilovamizning yuklash jarayonini yangilashimiz kerak.
HMR uchun muhit qo'shing
Quyidagi tarkibga ega src/environments/environment.hmr.ts nomli fayl yarating:
src/environments/environment.prod.ts ni yangilang va muhitga hmr: false bayrog'ini qo'shing:
src/environments/environment.ts ni yangilang va muhitga hmr: false bayrog'ini qo'shing:
“Bu yerda” tushuntirilganidek hmr muhitini kiritish uchun angular.json-ni yangilang va tuzilishga konfiguratsiyalarni qo'shing va hmr-ni yoqish uchun xizmat qiling. E'tibor bering, bu erda <project-name> angular.json da ushbu konfiguratsiyani qo'shayotgan loyiha nomini bildiradi.
src/tsconfig.app.json ga kerakli turlarni qo'shing
hmr ni yoqish va yangi muhitni tanlash uchun --configuration hmr bayrog'i bilan ng serve ni ishga tushiring: $ ng serve --configuration hmr
Buning uchun package.json ni yangilash va skript ob'ektiga yozuv qo'shish orqali yorliq yarating:
"scripts": {
...
"hmr": "ng serve --configuration hmr"
}
@angularclass/hmr uchun qaramlikni qo'shing va ilovani sozlang
HMR ishlashi uchun biz bog'liqlikni o'rnatishimiz va ilovamizni undan foydalanish uchun sozlashimiz kerak. @angularclass/hmr modulini ishlab chiqaruvchiga bog'liqlik sifatida o'rnating: $ npm install @angularclass/hmr --save-dev
Quyidagi tarkibga ega src/hmr.ts nomli fayl yarating:
Biz yaratgan fayldan foydalanish uchun src/main.ts ni yangilang:
HMR yoqilgan holda ishlab chiqish muhitini ishga tushirish
Endi hamma narsa sozlangan bo'lsa, biz yangi konfiguratsiyani ishga tushirishimiz mumkin:
$ npm run hmr
Muammo
Aslida, Angular-da haqiqiy issiq qayta yuklash yo'q. Bu istiqbolli bo'lib tuyuldi, ammo oddiy sinovdan so'ng, bu aslida modulni qayta yuklash bilan shug'ullanmaydi.
Odatiy bo'lib, Redux holati kabi biror narsadan foydalanmasangiz, qaysi ramkadan foydalanmasligingizdan qat'i nazar, HMR avtomatik ravishda holatni yo'qotadi. Ha, bu odatiy xatti-harakatlar usuli, tashvishlanmang!
Issiq qayta yuklash vaqtida holatni saqlang
HMRni kerakli tarzda ishlashi uchun jamoamiz plaginni ishlab chiqqan. Bugungi raqamda plagin beta-versiyada, shuning uchun uni shu tarzda o'rnatishingiz mumkin:
$ npm install @ngxs/hmr-plugin --save-dev
Rasmiy reliz 3.4.0 versiyasida rejalashtirilgan.
Keyingisi nima
Siz shunchaki quyidagi amallarni bajarishingiz kerak: hmr.ts faylini oʻchirib tashlang va main.tsni yangilang:
NGXS bilan HMR-dan rohatlaning
Bu qanday ishlaydi?
NGXS HMR hayot aylanishi
Agar siz hmr hayot aylanishi davomida holatga ba'zi o'zgartirishlar kiritmoqchi bo'lsangiz, ushbu o'rnatilgan amallardan foydalanishingiz mumkin. Ular ishlab chiqarishda bajarilmaydi.
