Встроенная модель окружений Vite основана на разделении исполнения кода на несколько независимых контекстов, каждый из которых имеет собственные правила резолвинга модулей, доступные API и модель выполнения. Такой подход позволяет унифицировать разработку приложений, которые одновременно поддерживают браузерный рендеринг, серверный рендеринг и edge-окружения, сохраняя при этом согласованную систему сборки и HMR.
Архитектурно окружения Vite строятся вокруг идеи изолированных графов модулей. Каждый граф соответствует конкретной среде выполнения, где отличаются не только цели бандлинга, но и способы интерпретации зависимостей, формат модулей, а также доступ к встроенным объектам среды. Основные встроенные окружения включают client, ssr и workerd.
Client-окружение представляет классическую браузерную среду выполнения. Именно сюда попадает основной фронтенд-бандл, исполняемый в браузере через ES-модули.
Ключевой характеристикой client-окружения является ориентация на нативную загрузку модулей в браузере, где Vite активно использует ESM без предварительного полного бандлинга в dev-режиме. Вместо этого применяется трансформация “на лету” с последующей доставкой модулей через dev-сервер.
Основные особенности client-окружения:
Граф модулей client-окружения строится вокруг entry-файла фронтенда. Все импорты анализируются Vite, после чего формируется карта зависимостей. В dev-режиме каждый модуль остаётся отдельной единицей доставки, что снижает стоимость пересборки при изменениях.
Отдельное значение имеет механизм обработки сторонних зависимостей. Библиотеки из node_modules предварительно преобразуются в формат, совместимый с браузером, поскольку исходный формат может включать CommonJS или Node.js специфичные конструкции.
SSR-окружение предназначено для серверного рендеринга. Оно выполняется в Node.js или совместимых runtime и отличается принципиально иной моделью выполнения модулей.
Основное отличие ssr-окружения заключается в том, что оно ориентировано не на работу с DOM, а на генерацию HTML на сервере. В результате часть API браузера отсутствует, но доступны серверные возможности, включая файловую систему, сетевые запросы и Node.js встроенные модули.
Внутри Vite SSR-окружение формирует отдельный граф модулей, который не пересекается напрямую с client-графом. Это позволяет:
SSR-граф работает в формате ESM в большинстве современных конфигураций. Однако Vite также поддерживает интероперабельность с CommonJS модулями через трансформацию.
Особое значение имеет механизм ssrLoadModule, который позволяет загружать модули по требованию во время серверного рендеринга. Такой подход обеспечивает близость к dev-режиму, где изменения кода могут отражаться без полной пересборки приложения.
SSR-окружение тесно связано с понятием hydration. Код, исполняемый на сервере, подготавливает структуру приложения, которая затем повторно активируется в client-окружении. При этом важно, что один и тот же модуль может иметь разное поведение в зависимости от среды выполнения.
Для управления различиями между окружениями используется условная логика и специальные флаги сборки, позволяющие разделять server-only и client-only код.
Workerd-окружение представляет edge-runtime модель, ориентированную на выполнение кода в средах типа Cloudflare Workers. В отличие от Node.js, workerd не имеет полноценной файловой системы и использует ограниченный набор Web-стандартов API.
Vite включает поддержку workerd как отдельного окружения для построения серверной логики, которая может исполняться ближе к пользователю на edge-инфраструктуре.
Основные характеристики workerd-окружения:
В контексте Vite workerd-окружение формирует отдельный граф модулей, аналогичный SSR, но с дополнительными ограничениями совместимости. Это требует иной стратегии работы с зависимостями:
Ключевой особенностью является то, что workerd-окружение часто используется совместно с SSR-моделью, где часть логики выполняется на edge, а часть — на клиенте. Это приводит к гибридной архитектуре, в которой Vite координирует несколько окружений одновременно.
Каждое окружение в Vite обладает собственным независимым графом модулей. Это означает, что один и тот же файл может быть интерпретирован по-разному в зависимости от контекста исполнения.
Изоляция достигается через:
Такая модель позволяет избежать конфликтов между server и client реализациями библиотек, которые часто используют разные entry-points (например, browser build и node build).
Важным элементом является возможность маршрутизации модулей между окружениями. Некоторые модули могут быть явно помечены как принадлежащие SSR или client графу, что позволяет Vite корректно формировать зависимости и избегать попадания несовместимого кода в неподходящую среду.
При построении современных приложений редко используется только одно окружение. Чаще формируется связка, где client отвечает за UI, ssr — за первичный рендеринг, workerd — за edge-логику.
В такой архитектуре Vite выполняет роль координационного слоя, который:
Особое значение приобретает единый исходный код, который адаптируется под разные среды через условные экспорты и контекстные проверки окружения. При этом Vite сохраняет консистентность между dev и production режимами, минимизируя расхождения в поведении модулей.
Различия между окружениями определяются не только API, но и фундаментальными ограничениями runtime:
Vite абстрагирует эти различия через систему окружений, где каждый runtime рассматривается как самостоятельная цель сборки. Это позволяет строить приложения, в которых один кодовый базис обслуживает несколько уровней исполнения без дублирования логики.
Резолвинг в разных окружениях отличается поведением:
При этом Vite анализирует поле exports в package.json и выбирает соответствующую ветку импорта. В SSR и workerd режимах дополнительно применяется externalization для предотвращения избыточного бандлинга серверных библиотек.
Hot Module Replacement работает только в client-окружении напрямую, но его эффекты могут транслироваться в SSR через пересоздание серверного графа модулей.
В SSR и workerd режимах изменения кода часто приводят не к инкрементальному обновлению, а к перезагрузке части графа. Это связано с тем, что серверные окружения требуют согласованного состояния модулей при каждом запросе или изолированном запуске.
Комбинация client + ssr + workerd позволяет реализовывать архитектуры с распределённой логикой:
Vite объединяет эти уровни через единый инструмент сборки, сохраняя при этом независимость окружений и предотвращая утечки несовместимого кода между ними.