Kuidas töötab kuum taaskäivitus (hot reload) Vue CLI näites?

Vue CLI kasutab webpack-dev-serverit, mis sisaldab Hot Module Replacement (HMR).

HMR-i tööprotsess Vue jaoks näeb välja järgmine:

1. Arendusserveri käivitamine: Käivitades npm run serve, käivitab webpack-dev-server serveri ja hakkab jälgima projekti faile.
2. Faili muutmine: Kui arendaja salvestab muudatused failis (.vue, .js, .css jne).
3. Muutuste tuvastamine: webpack-dev-server tuvastab muudatuse fakti.
4. Mooduli uuesti kompileerimine: Webpack uuesti kompileerib muudetud mooduli (näiteks Vue komponendi).
5. Uuenduse saatmine: Webpack-dev-server saadab uuenduste paketi (hotswap update) brauserile WebSocketi kaudu.
6. Uuenduse rakendamine: HMR kliendiosa (kood, mis on projekti sisse ehitatud) saab selle paketi ja püüab seda rakendada. Vue komponentide puhul tähendab see vana komponendi definitsiooni asendamist uuega, säilitades samal ajal olemasoleva oleku (näiteks andmed data()-s).
7. DOM-i uuendamine: Vue reageerivalt uuendab DOM-i, kasutades uut malli või komponendi loogikat, ilma kogu lehte uuesti laadimata.

Uuenduste paketi näidistruktuur:

{
  "hash": "...", // Kompileerimise hash
  "c": { // Uuendatud osad
    "src/components/HelloWorld.vue": true // Moodul, mida tuleb uuendada
  }
}

HMR kliendikood saab selle paketi ja käivitab uuendusloogika src/components/HelloWorld.vue jaoks.

// Näide pseudo-koodist HMR kliendikoodis
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue komponendi uuendusloogika, mis säilitab oleku
    // Tavaliselt teostab seda vue-loader koos webpack-dev-serveriga
  });
}

Seega, komponendi muutmisel uuendatakse ainult see komponent mälus brauseris, mitte kogu lehte, mis märkimisväärselt kiirendab arendusprotsessi.