Vue CLI мисалында ысык кайра жүктөө (hot reload)…

Vue CLI webpack-dev-server колдонуп, ал Hot Module Replacement (HMR) түзөт.

Vue үчүн HMR иштөө процесси төмөндөгүчө:

Дамуу серверин иштетүү: npm run serve командасы менен webpack-dev-server серверин иштеткенде, ал серверди баштап, долбоордун файлдарын көзөмөлдөй баштайт.
Файл өзгөртүү: Дамуу иштеп чыгуучу файлда өзгөртүүлөрдү сактаганда (.vue, .js, .css жана башка).
Өзгөртүүлөрдү аныктоо: webpack-dev-server өзгөртүүнү аныктайт.
Модулду кайра куруу: Webpack өзгөртүлгөн модулду (мисалы, Vue компоненти) кайра курат.
Жаңылоо пакетін жөнөтүү: webpack-dev-server жаңылоо пакетін (hotswap update) WebSocket аркылуу браузерге жөнөтөт.
Жаңылоо колдонуу: HMRдин кардар бөлүгү (курулуш кодуна киргизилген), пакетті алгандан кийин аны колдонууга аракет кылат. Vue компоненттери үчүн бул, эски компоненттин аныктамасын жаңы менен алмаштыруу, учурдагы күйүн сактоо (мисалы, data() ичиндеги маалыматтарды) билдирет.
DOM жаңылоо: Vue жаңы шаблон же компонент логикасын колдонуп, DOM реактивдүү түрдө жаңыланат, бүт баракчаны кайра жүктөбөстөн.

Жаңылоо пакети структурасынын мисалы:

{
  "hash": "...", // Билдүүнүн хеши
  "c": { // Жаңыртылган бөлүктөр
    "src/components/HelloWorld.vue": true // Модуль жаңыланат
  }
}

HMR кардар коду бул пакетті алат жана src/components/HelloWorld.vue үчүн жаңыртуу логикасын ишке ашырат.

// HMR кардар коду ичинде псевдокод мисалы
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue компонентинин жаңыртуу логикасы, абалын сактоо менен
    // Адатта, бул vue-loader жана webpack-dev-server менен башкарылат
  });
}

Ошентип, компонентте өзгөртүү болсо, ошол компонент браузердин эсинде гана жаңыртылат, бүт баракча эмес, бул өнүктүрүүнү кыйла тездетет.

Vue CLI мисалында ысык кайра жүктөө (hot reload) кантип иштейт?