Cum funcționează reîncărcarea rapidă (hot reload) în exemplul Vue CLI?

Vue CLI utilizează webpack-dev-server, care include Hot Module Replacement (HMR).

Procesul de funcționare al HMR pentru Vue arată astfel:

1. Pornirea serverului de dezvoltare: La rularea npm run serve, webpack-dev-server pornește serverul și începe să monitorizeze fișierele proiectului.
2. Modificarea fișierului: Când dezvoltatorul salvează modificări într-un fișier (.vue, .js, .css, etc.).
3. Detectarea modificărilor: webpack-dev-server detectează schimbarea.
4. Reconstrucția modulului: Webpack recompune modulul modificat (de exemplu, un component Vue).
5. Trimiterea actualizării: webpack-dev-server trimite pachetul de actualizări (hotswap update) către browser prin WebSocket.
6. Aplicarea actualizării: Partea client a HMR (încorporată în codul de build), primește pachetul și încearcă să îl aplice. Pentru componentele Vue, aceasta înseamnă înlocuirea definiției vechi a componentei cu cea nouă, păstrând starea actuală a instanțelor componentei (de exemplu, datele din data()).
7. Actualizarea DOM: Vue actualizează reactiv DOM-ul folosind noul șablon sau logica componentei, fără a reîncărca întreaga pagină.

Exemplu de structură a pachetului de actualizare:

{
  "hash": "...", // Hash-ul de build
  "c": { // Părțile de build actualizate
    "src/components/HelloWorld.vue": true // Modulul care trebuie actualizat
  }
}

Codul client HMR primește acest pachet și rulează logica de actualizare pentru src/components/HelloWorld.vue.

// Exemplu de pseudocod în codul client HMR
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Logica de actualizare a componentei Vue, păstrând starea
    // De obicei, gestionată de vue-loader împreună cu webpack-dev-server
  });
}

Astfel, la modificarea unei componente, doar acea componentă din memorie în browser este actualizată, nu întreaga pagină, ceea ce accelerează semnificativ dezvoltarea.