Kā darbojas karstā pārlāde (hot reload) Vue CLI piemēra gadījumā?

Vue CLI izmanto webpack-dev-server, kas ietver Hot Module Replacement (HMR).

HMR darba process Vue izskatās šādi:

1. Izstrādes servera palaišana: Palaižot npm run serve, webpack-dev-server uzsāk serveri un sāk uzraudzīt projekta failus.
2. Faila izmaiņas: Kad izstrādātājs saglabā izmaiņas failā (.vue, .js, .css utt.).
3. Izmaiņu atklāšana: webpack-dev-server atklāj izmaiņu faktu.
4. Moduļa pārkompilācija: Webpack pārkompilē izmainīto moduli (piemēram, Vue komponentu).
5. Atjauninājuma sūtīšana: Webpack-dev-server sūta atjauninājumu paketi (hotswap update) uz pārlūkprogrammu caur WebSocket.
6. Atjauninājuma piemērošana: HMR klienta daļa (kods, kas iekļauts projektā) saņem šo paketi un mēģina to piemērot. Vue komponentiem tas nozīmē vecā komponenta definīcijas aizvietošanu ar jauno, saglabājot esošo stāvokli (piemēram, datus data()).
7. DOM atjaunināšana: Vue reaktivi atjaunina DOM, izmantojot jauno šablonu vai komponenta loģiku, nevis pilnībā pārkraujot lapu.

Piemēra atjauninājumu paketes struktūra:

{
  "hash": "...", // Kompilācijas hash
  "c": { // Atjauninātās sastāvdaļas
    "src/components/HelloWorld.vue": true // Modulis, kas jāatjaunina
  }
}

HMR klienta kods saņem šo paketi un sāk atjaunināšanas loģiku src/components/HelloWorld.vue.

// Piemērs pseudo-koda HMR klienta kodā
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue komponenta atjaunināšanas loģika, kas saglabā stāvokli
    // Parasti to veic vue-loader kopā ar webpack-dev-server
  });
}

Tādējādi, mainot komponentu, tiek atjaunināts tikai šis komponenta daļa atmiņā pārlūkā, nevis visa lapa, kas ievērojami paātrina izstrādes procesu.