在实际项目中，开发者常常会碰到以下痛点：

• ⚠️ 插件状态相互污染dev 与 build 共享同一个模块图和插件容器。导致热更新、SSR、建立之间的副作用交叉。话说回来，
• ⚠️ 环境配置难以维护不同运行时需要各自的 resolveoptimizeDepsHMR 配置。却只能在同一个 vite.config.ts 中写混杂的选项。
• ⚠️ 热更新失效或冲突当多个环境共用同一套 watcher/hot 通道时文件变更会触发错误的 HMR 行为。
• ⚠️ SSR 与浏览器打包差异不明确MainFields/Conditions 的默认值不易察觉，导致 SSR 包意外引用浏览器专属代码。
• ⚠️ 自定义环境难以接入插件程序插件往往只能判断是 “dev” 还是 “build”，缺少对自定义环境的感知。

Environment API 是 Vite 引入的主要架构升级。它把原本单一的 dev/build 上下文拆分为多个独立的环境每个环境拥有独立的模块图、插件容器和  通道，解决主要问题上述痛点。

整体架构概览

Vite 及之前
┌─────────────────┐
│ ViteDevServer │
│ ├─ moduleGraph │
│ ├─ pluginCont. │
│ └─ watcher │
└─────────────────┘
Vite
┌──────────────────────┐
│ ViteDevServer │
│ ├─ environments │
│ │ ├─ client │
│ │ │ ├─ moduleGraph │
│ │ │ ├─ pluginContainer │
│ │ │ └─ hot │
│ │ ├─ ssr │
│ │ │ ├─ moduleGraph │
│ │ │ ├─ pluginContainer │
│ │ │ └─ hot │
│ │ └─ custom …└──────────────────────┘

完整的环境初始化流程

resolveConfig
├─ 配置层面的环境准备
│ ├─ environments: { client: {},ssr: {} } ← 默认创建
│ ├─ dev.warmup / ssr.optimizeDeps / …← 向后兼容
│ ├─ getDefaultEnvironmentOptions ← 默认选项
│ ├─ mergeConfig ← 合并
│ ├─ runConfigEnvironmentHook ← 插件修改
│ ├─ resolveEnvironmentOptions → ResolvedEnvironmentOptions ← 解析配置
│ └─ client.optimizeDeps / ssr → config ← 回写兼容层
_createServer
├─ 运行时的环境实例化
│ ├─ DevEnvironment.constructor
│ ├─ new EnvironmentModuleGraph
│ ├─ normalizeHotChannel → 注册 invoke
│ ├─ depsOptimizer = createDepsOptimizer
│ └─ 注册 vite:invalidate → environment.init
├─ createEnvironmentPluginContainer
└─ server.listen
└─ for each environment:
• hot.listen ← 启动 HMR
• depsOptimizer.init ← 预建立依赖
• warmupFiles ← 文件预热

环境的生命周期

创建
▼ 初始化
• 插件容器创建 → resolveEnvironmentPlugins → 环境级插件列表
▼ 监听
• HMR 启动 ← 独立通道防止互相触发
• 依赖预建立 ← 客户端/SSR 分别策略化处理
• 文件预热 ← 首次访问不卡顿
▼ 正常运行中
• transformRequest ← 按需转换
• reloadModule ← HMR 精准触发，仅影响对应环境模块
• fetchModule ← ModuleRunner 获取
• waitForRequestsIdle ← 等待爬取完成
▼ 销毁
• 插件容器关闭、depsOptimizer关闭、HMR通道关闭、等待 pending 请求完成 

环境类继承层次

PartialEnvironment
├ name,config,logger,getTopLevelConfig
└ BaseEnvironment
├ plugins getter,_initiated
├ DevEnvironment // 开发阶段主入口
| mode = 'dev'
| moduleGraph,pluginContainer,depsOptimizer,hot
| transformRequest,reloadModule,fetchModule
| waitForRequestsIdle
|
|── RunnableDevEnvironment
| runner getter
|
|── FetchableDevEnvironment
fetchModule 支持远程访问
├ BuildEnvironment // 建立阶段主入口
mode = 'build'
isBuilt。buildOptions,pluginContainer,rollupWatcher
◦ ScanEnvironment // 用于依赖扫描阶段
◦ UnknownEnvironment // 占位类型，防止未知 env 报错 

三种内置环境对比

辅助函数

再看环境状态隔离。/ h4>

说到源码文件，environment.ts 

\`Vite\` 同时存在多个 \`environment\` 实例，如果插件使用全局变量保存临时状态，会导致状态互相污染。不过，*这正是上面列出的“插件状态相互污染”痛点* 该函数利用 \`WeakMap\` 自动为每个 \`environment\` 创建独立缓存。实例销毁后自动 GC，彻底防止内存泄漏。

{ const stateMap = new WeakMap;return function{ const{environment}=context;let state=stateMap.get;if{ state=initial;怎么说呢，stateMap.set;} return state;}，})

生成默认基础配置：getDefaultEnviron mentOptions<\/ h4>

\src/config.ts<\/ p>

• \*大部分复用、少量差异化覆盖*：根配置 \`\`\`\{define,...\}\`\`\` 自动继承至每个子 环境； 避免手动复制大量重复代码。说起来，
• \*全局根配置 vs 环境配置冲突*\ : 自动清空 \`resolve.mainFields\` 和 \`resolve.conditions\`。为 \`client\`,\`ssr\`,\`worker\` 提供各自合理默认值，解决主要问题“SSR 与浏览器打包差异不明确”。<\/ li> javascript export function getDefaultEnv ironmentOptions{ return{ define这方面，config.define,resolve:{...config.resolve,mainFields:undefined,conditions:undefined},dev:config.dev。build:config.build,} }

  执行插件的 environment runConfigEnviron mentHook<\/ h4>

  • \*轻量化 PluginContext* : 在真正创建 Environment 前提供最小上下文，让插件可以安全地修改每个子 环境 的 config。
  • \*按优先级排序执行*\ : 确保关键插件先介入，以免后续覆盖导致功能失效。<\/ li> javascript async function runCon figE nvironmentHook{ const context=new BasicMinimalPluginContext;const envNames=Object.keys;for){ const hook=p.configE nvironment;const handler=getHookHandler;for{ const res=await handler.call(context,name,environments,{ ...configEnv。isSsrTargetWebworker:isSsrTargetWebworkerSet && name==='ss r',});if{environments=mergeC onfig;} } } }

    标准化 environment 配置：resolveEnv ironmentOptions<\/ h4>

    • \*消费端标识推导*\ : 未显式声明时自动判定 \`client => consumer:'client'\`,\`ssr => consumer:'server'\`. 消除手动出错风险。
    • \*安全校验*\ : 检测是否误将整个 `process.env` 暴露到 `define`。给出黄色警告，防止生产泄露敏感信息。<\/ li> javascript function resolveE nvironmentOptions{ const isClientEnv=environmentName==='client';不过，const consumer=options.consumer?，;const isWebWorker=isSsrTargetWebworkerSet && environmentName==='ss r';// ，省略安全校验代码…const resolve=resolveE nvironmentResolveOptions( options.resolve。alias,preserveSymlinks,logger,consumer,isWebWorker);return{ 再看define，options.define,resolve。keepProcessEnv:options.keepProcessEnv?，consumer,optimizeDeps:resolveDepOptimizationOp tions,dev:resolveDevE nvironmentOptions。build:resolveBuildE nvironmentOptions,plugins:undefined,};}