Архитектура окружений в Vite основана на разделении контекста выполнения на независимые среды, каждая из которых обладает собственным графом модулей, конфигурацией трансформации и стратегией бандлинга. Пользовательское окружение в этой модели представляет собой расширяемую сущность, позволяющую вводить дополнительные изолированные контексты помимо стандартных client и server, которые применяются в классическом SSR или SPA сценариях.
Каждое окружение в Vite представляет собой самостоятельный слой обработки модулей, включающий:
Ключевая идея заключается в том, что один проект может одновременно обслуживать несколько целевых платформ или рантаймов без смешивания их логики. Это особенно важно в сценариях SSR, edge runtime и гибридных приложениях.
Пользовательское окружение расширяет эту модель, позволяя вводить новые типы исполнения кода, например:
Пользовательское окружение в Vite определяется как объект конфигурации, описывающий:
Логически окружение выступает как контейнер, в котором Vite строит отдельный pipeline обработки модулей.
Внутри архитектуры Vite окружение не является просто набором настроек, а полноценным runtime-контекстом, который может иметь собственный dev-server pipeline и собственный build pipeline.
Современная архитектура Vite (начиная с концепции Environments API) вводит возможность декларативного описания окружений через конфигурацию:
export default {
environments: {
edge: {
dev: {
optimizeDeps: {
include: ['lodash-es']
}
},
build: {
target: 'es2022'
}
}
}
}В этом примере создаётся дополнительное окружение edge,
которое существует параллельно с основными клиентскими и серверными
контекстами.
Каждое окружение может иметь собственные параметры:
dev — поведение в режиме разработкиbuild — параметры сборкиresolve — стратегия поиска модулейplugins — отдельный стек плагиновПлагины в Vite могут быть привязаны к конкретному окружению. Это позволяет разделять поведение трансформации кода в зависимости от целевого рантайма.
Пример логики:
Плагин может проверять текущий контекст выполнения:
export function myPlugin() {
return {
name: 'env-aware-plugin',
transform(code, id, options) {
if (options.environment?.name === 'edge') {
// упрощённая трансформация для edge runtime
}
}
}
}Таким образом, один и тот же плагин может адаптировать поведение в зависимости от окружения.
Каждое окружение строит собственный module graph. Это означает:
При этом Vite синхронизирует зависимости между окружениями только на уровне исходных файлов, но не на уровне трансформированного результата.
Такой подход позволяет, например, использовать общий исходный код, но генерировать разные артефакты для browser и server runtime.
Пользовательское окружение всегда разделяет два ключевых режима:
В режиме разработки окружение:
В режиме сборки:
Каждое окружение может иметь собственную стратегию сборки, что особенно важно для multi-runtime приложений.
Несмотря на изоляцию, окружения могут взаимодействовать через:
Пример сценария:
При этом один и тот же модуль может быть импортирован в разные окружения, но с разной интерпретацией.
В пользовательских окружениях важную роль играет управление external-зависимостями.
Каждое окружение может иметь:
Пример:
environments: {
edge: {
ssr: {
external: ['fs', 'path']
}
}
}Такой подход предотвращает попадание несовместимых модулей в runtime, где они не поддерживаются.
Vite выполняет pre-bundling зависимостей отдельно для каждого окружения. Это означает:
Особенно это важно при работе с monorepo, где один пакет может обслуживать несколько runtime-целей.
Пользовательское окружение может быть реализовано как виртуальный слой, не привязанный к физическому runtime. В этом случае оно используется для:
Такой подход позволяет создавать компиляторные pipeline внутри Vite без необходимости запуска кода.
Пользовательские окружения наиболее эффективно используются в следующих архитектурах:
Каждый из этих сценариев требует строгой изоляции графов модулей и гибкой конфигурации пайплайна трансформации.
Модель пользовательских окружений накладывает ряд ограничений:
При этом архитектура остаётся предсказуемой за счёт строгого разделения контекстов и детерминированного построения графов.
Пользовательские окружения формируют основу для перехода от монолитного dev-server к многослойной системе сборки. Это позволяет рассматривать Vite не только как инструмент разработки, но как инфраструктурный слой для управления кодом в разных рантаймах.
Изоляция окружений обеспечивает: