Hogyan működik a hot reload a Vue CLI példában…

A Vue CLI a webpack-dev-server-t használja, amely tartalmazza a Hot Module Replacement (HMR) funkciót.

A HMR működése Vue esetén a következőképpen történik:

Fejlesztői szerver indítása: A npm run serve futtatásakor a webpack-dev-server elindítja a szervert, és elkezdi figyelni a projekt fájljait.
Fájl módosítása: Amikor a fejlesztő menti a változtatásokat egy fájlban (.vue, .js, .css, stb.).
Változások észlelése: A webpack-dev-server észleli a változást.
Modul újraépítése: A Webpack újraépíti a módosított modult (pl. egy Vue komponenst).
Frissítés küldése: A webpack-dev-server elküldi a frissítési csomagot (hotswap update) a böngészőnek WebSocket-en keresztül.
A frissítés alkalmazása: A HMR kliens része (a build kódba beágyazva) megkapja a csomagot, és megpróbálja alkalmazni. Vue komponenseknél ez azt jelenti, hogy a régi komponensdefiníciót lecseréli az újság, miközben megőrzi a komponens példányainak aktuális állapotát (pl. a data()-ban lévő adatokat).
DOM frissítése: A Vue reaktívan frissíti a DOM-ot az új sablon vagy logika szerint, anélkül, hogy az egész oldalt újratöltené.

Példa a frissítési csomag szerkezetére:

{
  "hash": "...", // A build hash értéke
  "c": { // Frissített build részek
    "src/components/HelloWorld.vue": true // Frissítendő modul
  }
}

A HMR klienskód megkapja ezt a csomagot, és végrehajtja a frissítési logikát a src/components/HelloWorld.vue-ra.

// Pseudokód példa a HMR klienskódban
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue komponens frissítési logika, az állapot megőrzésével
    // Általában ezt a vue-loader és a webpack-dev-server kezeli
  });
}

Így, amikor egy komponensen változtatnak, csak az a komponens frissül a böngésző memóriájában, nem az egész oldal, ami jelentősen gyorsítja a fejlesztést.

Hogyan működik a hot reload a Vue CLI példában?