Hoe werkt hot reload in het voorbeeld van Vue CLI?

Vue CLI gebruikt webpack-dev-server, dat Hot Module Replacement (HMR) bevat.

Het werkingsproces van HMR voor Vue ziet er als volgt uit:

1. Start de ontwikkelserver: Bij het uitvoeren van npm run serve start webpack-dev-server de server en begint het de projectbestanden te bewaken.
2. Bestand wijzigen: Wanneer de ontwikkelaar wijzigingen opslaat in een bestand (.vue, .js, .css, etc.).
3. Detectie van wijzigingen: webpack-dev-server detecteert de wijziging.
4. Herbouw van de module: Webpack herbouwt de gewijzigde module (bijvoorbeeld een Vue-component).
5. Verzenden van de update: webpack-dev-server stuurt het updatepakket (hotswap update) naar de browser via WebSocket.
6. Toepassen van de update: Het clientgedeelte van HMR (ingebed in de build-code), ontvangt het pakket en probeert het toe te passen. Voor Vue-componenten betekent dit het vervangen van de oude componentdefinitie door de nieuwe, terwijl de huidige staat van de componentinstanties behouden blijft (bijvoorbeeld gegevens in data()).
7. DOM bijwerking: Vue werkt reactief het DOM bij met de nieuwe sjabloon of logica van de component, zonder de hele pagina te herladen.

Voorbeeld van de structuur van het updatepakket:

{
  "hash": "...", // Build-hash
  "c": { // Bijgewerkte delen van de build
    "src/components/HelloWorld.vue": true // Module die moet worden bijgewerkt
  }
}

De HMR-clientcode ontvangt dit pakket en voert de update-logica uit voor src/components/HelloWorld.vue.

// Voorbeeld van pseudocode binnen de HMR-clientcode
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Logica voor het bijwerken van de Vue-component, met behoud van de staat
    // Normaal wordt dit afgehandeld door vue-loader samen met webpack-dev-server
  });
}

Op deze manier wordt bij het wijzigen van een component alleen dat component in het geheugen van de browser bijgewerkt, niet de hele pagina, wat de ontwikkeling aanzienlijk versnelt.