Как работи горещото презареждане (hot reload) на…

Vue CLI използва webpack-dev-server, който включва Hot Module Replacement (HMR).

Процесът на работа на HMR за Vue изглежда така:

Стартиране на dev сървъра: При изпълнение на npm run serve, webpack-dev-server стартира сървъра и започва да следи файловете на проекта.
Промяна на файл: Когато разработчикът запази промените във файл (.vue, .js, .css и т.н.).
Откриване на промени: webpack-dev-server открива промяната.
Ребилд на модула: Webpack преправя променения модул (например Vue компонент).
Изпращане на актуализация: webpack-dev-server изпраща пакета с актуализации (hotswap update) към браузъра чрез WebSocket.
Прилагане на актуализацията: Частта клиент на HMR (вградена в кода за билдване), получава пакета и се опитва да го приложи. За Vue компонентите това означава замяна на старото определение на компонента с новото, като се запазва текущото състояние на инстанциите на компонента (например данните в data()).
Актуализация на DOM: Vue реактивно актуализира DOM, използвайки новия шаблон или логика на компонента, без да презарежда цялата страница.

Пример за структура на пакета с актуализации:

{
  "hash": "...", // Хеш на билдването
  "c": { // Обновените части на билда
    "src/components/HelloWorld.vue": true // Модул, който трябва да бъде обновен
  }
}

Клиентският код на HMR получава този пакет и изпълнява логиката за актуализация за src/components/HelloWorld.vue.

// Пример за псевдокод в клиентския HMR код
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Логика за актуализиране на Vue компонента, запазвайки състоянието
    // Обикновено това се управлява от vue-loader заедно с webpack-dev-server
  });
}

По този начин, при промяна на компонента, само този компонент в паметта на браузъра се актуализира, а не цялата страница, което значително ускорява разработката.

Как работи горещото презареждане (hot reload) на примера Vue CLI?