За счет чего при разработке всегда показана свежая версия кода?

При разработке свежая версия кода показывается автоматически за счёт Hot Module Replacement (HMR) и live reload в dev-сервере: он отслеживает изменения файлов и обновляет браузер.

Механизмы

Hot Module Replacement (HMR)

Dev-сервер (Vite, Webpack) отслеживает изменения файлов и заменяет только изменённые модули в работающем приложении — без полной перезагрузки и с сохранением состояния:

Изменил компонент → HMR обновил только его → состояние приложения сохранилось

Live reload

Более простой вариант: при изменении файла перезагружается вся страница (состояние теряется). Fallback, когда HMR невозможен.

Как работает

1. Dev-сервер запускает file watcher — следит за изменениями исходников.
2. При сохранении файла — пересобирает изменённый модуль.
3. Через WebSocket сообщает браузеру об изменении.
4. Клиент применяет обновление (HMR) или перезагружает страницу (live reload).

Сохранение файла → watcher → пересборка → WebSocket → браузер обновляется

Что даёт

• Мгновенная обратная связь — видно изменения сразу.
• Сохранение состояния (HMR) — не нужно заново проходить к нужному экрану.
• Быстрая разработка.

Инструменты

Vite (очень быстрый HMR через нативные ES-модули), Webpack Dev Server, Next.js Fast Refresh.

Коротко для собеседования

Свежая версия кода при разработке показывается через HMR (Hot Module Replacement): dev-сервер (Vite/Webpack) следит за файлами (watcher), пересобирает изменённый модуль и через WebSocket обновляет браузер — без полной перезагрузки, с сохранением состояния. Fallback — live reload (перезагрузка всей страницы).