Ako funguje hot reload na príklade Vue CLI?

Vue CLI používa webpack-dev-server, ktorý obsahuje Hot Module Replacement (HMR).

Proces fungovania HMR pre Vue vyzerá takto:

1. Spustenie vývojového servera: Pri spustení npm run serve webpack-dev-server spustí server a začne sledovať súbory projektu.
2. Zmena súboru: Keď vývojár uloží zmeny v súbore (.vue, .js, .css atď.).
3. Detekcia zmien: webpack-dev-server deteguje zmenu.
4. Rebuild modulu: Webpack prebuduje zmenený modul (napríklad Vue komponentu).
5. Odoslanie aktualizácie: webpack-dev-server odošle balík aktualizácií (hotswap update) do prehliadača cez WebSocket.
6. Aplikácia aktualizácie: Časť klienta HMR (integrovanej do build kódu), obdrží balík a pokúsi sa ho aplikovať. Pre Vue komponenty to znamená nahradiť starú definíciu komponentu novou, pričom sa zachová aktuálny stav inštancií komponentu (napríklad dáta v data()).
7. Aktualizácia DOM: Vue reaktívne aktualizuje DOM pomocou nového šablóny alebo logiky komponentu, bez reloadu celej stránky.

Príklad štruktúry balíka aktualizácií:

{
  "hash": "...", // Hash buildovania
  "c": { // Aktualizované časti buildu
    "src/components/HelloWorld.vue": true // Modul, ktorý treba aktualizovať
  }
}

Klientska časť HMR dostáva tento balík a vykonáva logiku aktualizácie pre src/components/HelloWorld.vue.

// Príklad pseudokódu v klientskom HMR kóde
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Logika aktualizácie Vue komponentu, zachovanie stavu
    // Zvyčajne to riadi vue-loader spolu s webpack-dev-server
  });
}

Týmto spôsobom, pri zmene komponentu, sa aktualizuje iba tento komponent v pamäti prehliadača, nie celá stránka, čo výrazne zrýchľuje vývoj.