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, используя новый шаблон или логику компонента, не перегружая всю страницу.
Пример структуры пакета обновлений:
json
Клиентский код HMR получает этот пакет и запускает логику обновления для src/components/HelloWorld.vue.
javascript
Таким образом, при изменении компонента, обновляется только этот компонент в памяти браузера, а не вся страница, что значительно ускоряет разработку.