Fast Refresh в Vite представляет собой развитие классического Hot Module Replacement (HMR), ориентированное на сохранение состояния компонентов при изменениях кода. Основная цель механизма — максимально быстрое отражение изменений в браузере без полной перезагрузки страницы и без потери состояния приложения.
В основе работы лежит сочетание нативного ESM (ES Modules) и WebSocket-соединения между dev-сервером и клиентом. При изменении файла Vite пересобирает только затронутый модуль и отправляет обновление в браузер, где runtime-часть обновляет граф модулей.
Механизм Fast Refresh опирается на несколько ключевых компонентов:
Процесс обновления выглядит следующим образом:
Ключевое отличие Vite от традиционных бандлеров заключается в отсутствии необходимости пересобирать весь бандл — обновляется строго минимальная единица модуля.
Hot Module Replacement — низкоуровневый механизм обновления модулей. Fast Refresh — надстройка над HMR, добавляющая семантическое понимание UI-компонентов.
HMR отвечает за:
Fast Refresh добавляет:
В экосистеме Vite Fast Refresh чаще всего используется через интеграции:
React Fast Refresh реализован через
@vitejs/plugin-react, который подключает специальный
Babel/ESBuild трансформер и runtime обработки обновлений.
Основной принцип:
Условная логика определения boundary:
Пример поведения:
export function Button() {
const [count, setCount] = useState(0);
return (
<button onCl ick={() => setCount(c => c + 1)}>
{count}
</button>
);
}При изменении разметки внутри компонента Fast Refresh обновит только
render-часть, сохранив count.
Если же изменить структуру хуков:
if (condition) {
useEffect(() => {}, []);
}система перестанет считать компонент безопасным для сохранения состояния.
Во Vue Fast Refresh реализован через встроенный HMR API и особенности SFC (Single File Components).
Каждый .vue файл разбивается на блоки:
<template><script><style>Изменения обрабатываются точечно:
Vue HMR сохраняет состояние компонента за счёт привязки экземпляра компонента к идентификатору модуля. При обновлении runtime выполняет патчинг текущего экземпляра, а не пересоздание дерева.
Сохранение состояния в Fast Refresh основано на двух принципах:
React использует внутренний registry компонентов, где каждая функция-компонент сопоставляется с hot boundary.
Vue использует реактивную систему и привязку экземпляров к proxy-объектам.
При обновлении:
Fast Refresh не гарантирует сохранение состояния при изменении структуры компонента:
В таких случаях происходит full reload модуля.
Fast Refresh зависит от корректного определения границ компонентов. Нарушение этих границ приводит к сбросу состояния:
Fast Refresh не контролирует внешние источники состояния:
Хотя UI может обновиться без перезагрузки, состояние вне компонента может не синхронизироваться с новой версией кода, особенно при изменении reducer-логики.
Обновление стилей происходит частично, но имеет особенности:
Fast Refresh не способен безопасно обработать:
В таких случаях Vite инициирует full page reload вместо HMR update.
Если модуль изменяет свой экспорт:
runtime не может сопоставить старую и новую версии, и происходит сброс дерева компонентов.
При ошибках в обновлённом модуле Fast Refresh работает в деградированном режиме:
Это позволяет сохранить стабильность интерфейса без перезагрузки приложения.
Vite плагины могут влиять на поведение Fast Refresh через:
Некорректные плагины способны:
Особенно чувствительны плагины, изменяющие экспортную структуру файлов или добавляющие обёртки вокруг компонентов.
При изменении модуля обновление распространяется по графу зависимостей:
Если хотя бы один зависимый модуль не поддерживает безопасное обновление, Vite может откатиться к полной перезагрузке страницы.
Fast Refresh работает исключительно в режиме разработки.
В production-сборке:
Это создаёт различие между dev- и prod-поведением, особенно заметное при сложной логике инициализации компонентов.
Каждая из этих причин приводит либо к сбросу состояния компонента, либо к полной перезагрузке страницы вместо инкрементального обновления.