Jak działa gorące przeładowanie (hot reload) na…

Vue CLI używa webpack-dev-server, który zawiera Hot Module Replacement (HMR).

Proces działania HMR dla Vue wygląda następująco:

Uruchomienie serwera deweloperskiego: Podczas uruchomienia npm run serve, webpack-dev-server uruchamia serwer i zaczyna monitorować pliki projektu.
Zmiana pliku: Gdy deweloper zapisuje zmiany w pliku (.vue, .js, .css itd.).
Wykrycie zmian: webpack-dev-server wykrywa zmianę.
Przebudowa modułu: Webpack przebudowuje zmodyfikowany moduł (np. komponent Vue).
Wysyłka aktualizacji: webpack-dev-server wysyła pakiet aktualizacji (hotswap update) do przeglądarki przez WebSocket.
Zastosowanie aktualizacji: Część klienta HMR (wbudowana w kod kompilacji), po otrzymaniu pakietu, próbuje go zastosować. Dla komponentów Vue oznacza to zamianę starej definicji komponentu na nową, zachowując bieżący stan instancji tego komponentu (np. dane w data()).
Aktualizacja DOM: Vue reaktywnie aktualizuje DOM, korzystając z nowego szablonu lub logiki komponentu, bez przeładowania całej strony.

Przykład struktury pakietu aktualizacji:

{
  "hash": "...", // Hash kompilacji
  "c": { // Zaktualizowane części kompilacji
    "src/components/HelloWorld.vue": true // Moduł do zaktualizowania
  }
}

Kod klienta HMR otrzymuje ten pakiet i uruchamia logikę aktualizacji dla src/components/HelloWorld.vue.

// Przykład pseudokodu w kodzie klienta HMR
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Logika aktualizacji komponentu Vue, zachowując stan
    // Zazwyczaj obsługiwane przez vue-loader razem z webpack-dev-server
  });
}

W ten sposób, po zmianie komponentu, tylko ten komponent w pamięci przeglądarki jest aktualizowany, a nie cała strona, co znacznie przyspiesza rozwój.

Jak działa gorące przeładowanie (hot reload) na przykładzie Vue CLI?