菜单

高级特性

相关源文件

本文档涵盖了 Vite 为复杂应用和生产环境设计的先进功能。这些功能超出了基本的开发和构建功能,为服务器端渲染、旧版浏览器兼容性、高级模块执行和复杂的构建优化提供了专门支持。

有关基本配置和开发服务器功能,请参阅 配置系统开发服务器。有关生产构建过程,请参阅 构建过程

服务器端渲染 (SSR) 架构

Vite 提供了一个全面的 SSR 系统,可在服务器环境中转换和执行模块,同时保持与客户端代码的兼容性。

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 模块加载器使用模块运行系统来管理服务器环境中的模块实例化和执行。

SSR 模块加载器组件

组件类/函数职责
入口点ssrLoadModule()初始化 SSR 模块加载
运行器SSRCompatModuleRunner管理模块执行生命周期
传输createServerModuleRunnerTransport()处理模块通信
计算器ESModulesEvaluator执行转换后的模块代码

来源:packages/vite/src/node/ssr/ssrModuleLoader.ts14-29 packages/vite/src/node/ssr/ssrModuleLoader.ts65-105

旧版浏览器支持系统

Vite 的旧版插件通过自动注入 polyfill 和代码转换,为旧浏览器提供全面的支持。

旧版插件架构

旧版插件配置选项

选项类型默认目的
targetsstring | string[]'last 2 versions and not dead, > 0.3%, Firefox ESR'旧版分块的 Browserslist 目标
modernTargetsstring | string[]'edge>=79, firefox>=67, chrome>=64, safari>=12'现代分块的目标
polyfillsboolean | string[]true自动检测或指定 polyfills
renderLegacyChunks布尔值true生成旧版 SystemJS 分块
renderModernChunks布尔值true生成现代 ES 模块

来源:packages/plugin-legacy/src/index.ts136-161 packages/plugin-legacy/src/types.ts1-38

Polyfill 检测和注入

旧版系统根据代码使用情况和浏览器目标自动检测所需的 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

Worker 和多线程支持

Vite 支持用于多线程应用程序和计算密集型任务的高级 Worker 模式。

来源:在图分析中被引用为 Worker 插件(重要性:147.77)

集成模式

全栈 SSR 集成

高级应用通常需要客户端和服务器构建之间进行复杂的集成。

Manifest 集成

Manifest 类型目的用法模式
manifest.json客户端资源映射生产资源解析
ssr-manifest.jsonSSR 模块映射服务器端模块加载

来源:在图分析中被引用为后端集成(重要性:90.67)

这一高级功能集使 Vite 能够在保持开发者体验和性能特性的同时,处理复杂的生产场景,包括服务器端渲染、旧版浏览器支持、多线程执行和复杂的构建优化。