本文档涵盖了 Vite 为复杂应用和生产环境设计的先进功能。这些功能超出了基本的开发和构建功能,为服务器端渲染、旧版浏览器兼容性、高级模块执行和复杂的构建优化提供了专门支持。
有关基本配置和开发服务器功能,请参阅 配置系统 和 开发服务器。有关生产构建过程,请参阅 构建过程。
Vite 提供了一个全面的 SSR 系统,可在服务器环境中转换和执行模块,同时保持与客户端代码的兼容性。
SSR 转换系统通过重写导入、导出和模块引用来将 ES 模块转换为服务器端执行。
SSR 转换关键函数
| 功能 | 目的 | 输出 |
|---|---|---|
ssrTransform() | 主要的转换入口点 | 带有重写代码的 TransformResult |
defineImport() | 转换 import 语句 | 转换为 __vite_ssr_import__ 调用 |
defineExport() | 转换 export 语句 | 转换为 __vite_ssr_exports__ 赋值 |
walk() | 用于标识符重写的 AST 遍历 | 修改后的 AST 节点 |
来源:packages/vite/src/node/ssr/ssrTransform.ts50-61 packages/vite/src/node/ssr/ssrTransform.ts115-153 packages/vite/src/node/ssr/ssrTransform.ts155-162
SSR 模块加载器使用模块运行系统来管理服务器环境中的模块实例化和执行。
SSR 模块加载器组件
| 组件 | 类/函数 | 职责 |
|---|---|---|
| 入口点 | ssrLoadModule() | 初始化 SSR 模块加载 |
| 运行器 | SSRCompatModuleRunner | 管理模块执行生命周期 |
| 传输 | createServerModuleRunnerTransport() | 处理模块通信 |
| 计算器 | ESModulesEvaluator | 执行转换后的模块代码 |
来源:packages/vite/src/node/ssr/ssrModuleLoader.ts14-29 packages/vite/src/node/ssr/ssrModuleLoader.ts65-105
Vite 的旧版插件通过自动注入 polyfill 和代码转换,为旧浏览器提供全面的支持。
旧版插件配置选项
| 选项 | 类型 | 默认 | 目的 |
|---|---|---|---|
targets | string | string[] | 'last 2 versions and not dead, > 0.3%, Firefox ESR' | 旧版分块的 Browserslist 目标 |
modernTargets | string | string[] | 'edge>=79, firefox>=67, chrome>=64, safari>=12' | 现代分块的目标 |
polyfills | boolean | string[] | true | 自动检测或指定 polyfills |
renderLegacyChunks | 布尔值 | true | 生成旧版 SystemJS 分块 |
renderModernChunks | 布尔值 | true | 生成现代 ES 模块 |
来源:packages/plugin-legacy/src/index.ts136-161 packages/plugin-legacy/src/types.ts1-38
旧版系统根据代码使用情况和浏览器目标自动检测所需的 polyfills。
来源:packages/plugin-legacy/src/index.ts744-775 packages/plugin-legacy/src/index.ts286-369
模块运行系统提供了一个复杂的运行时,用于在服务器环境中执行模块,并支持 HMR、Source Maps 和模块失效。
模块运行系统组件
| 组件 | 目的 | 关键方法 |
|---|---|---|
ModuleRunner | 主要的执行协调器 | import(), close() |
ServerModuleRunnerTransport | 模块通信层 | fetchModule() |
ESModulesEvaluator | 模块代码评估 | runInThisContext() |
EvaluatedModuleNode | 模块状态管理 | 缓存和导出 |
来源:packages/vite/src/node/ssr/runtime/__tests__/utils.ts20-104 packages/vite/src/node/ssr/ssrModuleLoader.ts65-105
Vite 通过其配置系统提供编译时环境变量替换和常量定义。
环境变量类型
| 可变 | 类型 | 描述 | 来源 |
|---|---|---|---|
import.meta.env.MODE | 字符串 | 当前模式(开发/生产) | Vite 核心 |
import.meta.env.PROD | 布尔值 | 生产构建标志 | Vite 核心 |
import.meta.env.DEV | 布尔值 | 开发模式标志 | Vite 核心 |
import.meta.env.LEGACY | 布尔值 | 旧版浏览器目标标志 | 旧版插件 |
来源:packages/plugin-legacy/src/index.ts129-130 packages/plugin-legacy/src/index.ts249-254
Vite 支持用于多线程应用程序和计算密集型任务的高级 Worker 模式。
来源:在图分析中被引用为 Worker 插件(重要性:147.77)
高级应用通常需要客户端和服务器构建之间进行复杂的集成。
Manifest 集成
| Manifest 类型 | 目的 | 用法模式 |
|---|---|---|
manifest.json | 客户端资源映射 | 生产资源解析 |
ssr-manifest.json | SSR 模块映射 | 服务器端模块加载 |
来源:在图分析中被引用为后端集成(重要性:90.67)
这一高级功能集使 Vite 能够在保持开发者体验和性能特性的同时,处理复杂的生产场景,包括服务器端渲染、旧版浏览器支持、多线程执行和复杂的构建优化。