Как работает горячая перезагрузка (hot reload) на примере Vue CLI?

Vue CLI использует webpack-dev-server, который включает в себя Hot Module Replacement (HMR).

Процесс работы HMR для Vue выглядит так:

1. Запуск dev-сервера: При запуске npm run serve, webpack-dev-server поднимает сервер и начинает следить за файлами проекта.
2. Изменение файла: Когда разработчик сохраняет изменения в файле (.vue, .js, .css и т.д.).
3. Обнаружение изменений: webpack-dev-server обнаруживает факт изменения.
4. Пересборка модуля: Webpack пересобирает измененный модуль (например, компонент Vue).
5. Отправка обновления: Webpack-dev-server отправляет пакет обновлений (hotswap update) браузеру через WebSocket.
6. Применение обновления: Клиентская часть HMR (встроенная в код сборки), получив пакет, пытается применить его. Для Vue-компонентов это означает замену старого определения компонента на новое, сохраняя при этом текущее состояние экземпляров этого компонента (например, данные в data()).
7. Обновление 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
  });
}

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