本文档介绍了 Vite 的旧版浏览器支持系统，该系统通过 @vitejs/plugin-legacy 包实现。该系统使得使用 Vite 构建的应用程序能够在不支持原生 ES 模块、动态导入或 import.meta 的旧版浏览器中正常运行。
有关核心构建过程的信息，请参阅 构建过程。有关 SSR 的特定注意事项，请参阅 服务器端渲染。
此旧版插件解决了 Vite 的现代开发方法与旧版浏览器环境之间的根本兼容性差距。它会自动生成现代和旧版双重构建，并附带适当的 polyfills 和加载机制，以确保广泛的浏览器兼容性，同时为现代浏览器保持最佳性能。
旧版支持系统通过三个协同工作的插件来实现，这些插件处理构建过程的不同阶段
来源： packages/plugin-legacy/src/index.ts136-742 packages/plugin-legacy/src/index.ts212-280 packages/plugin-legacy/src/index.ts282-370 packages/plugin-legacy/src/index.ts372-739
该旧版系统由三个协同工作的插件组成，这些插件在不同的构建阶段执行
来源： packages/plugin-legacy/src/index.ts212-280 packages/plugin-legacy/src/index.ts282-370 packages/plugin-legacy/src/index.ts372-739 packages/plugin-legacy/src/index.ts744-775 packages/plugin-legacy/src/index.ts798-878
该插件接受全面的配置选项，用于控制目标浏览器和 polyfill 的行为
| 选项 | 类型 | 默认 | 目的 |
|---|---|---|---|
targets | string | string[] | Record<string, string> | 'last 2 versions and not dead, > 0.3%, Firefox ESR' | 用于旧版浏览器的 Browserslist 查询 |
modernTargets | string | string[] | 'edge>=79, firefox>=67, chrome>=64, safari>=12, chromeAndroid>=64, iOS>=12' | 现代浏览器目标 |
polyfills | boolean | string[] | true | 旧版 polyfill 配置 |
modernPolyfills | boolean | string[] | false | 现代 polyfill 配置 |
renderLegacyChunks | 布尔值 | true | 是否生成旧版代码块 |
renderModernChunks | 布尔值 | true | 是否生成现代代码块 |
externalSystemJS | 布尔值 | false | 排除 SystemJS 从 polyfill 包中 |
配置系统使用 browserslist 集成来解析目标，并在启用旧版生成时覆盖 Vite 的默认构建目标。
来源： packages/plugin-legacy/src/types.ts1-38 packages/plugin-legacy/src/index.ts397-403 packages/plugin-legacy/src/index.ts236-244
旧版构建过程通过多个协同阶段进行
在开发过程中，该插件会注入 legacyEnvVarMarker 以实现条件代码，但仅提供现代代码。在生产构建中，它会生成具有适当转换的现代和旧版双重捆绑包。
来源： packages/plugin-legacy/src/index.ts215-255 packages/plugin-legacy/src/index.ts465-587 packages/plugin-legacy/src/index.ts557-584
该系统通过一种复杂的客户端加载策略，根据浏览器功能有选择性地加载相应的捆绑包
该系统使用多种运行时检查来确定浏览器功能并加载适当的捆绑包。现代浏览器直接加载 ES 模块，而旧版浏览器则加载带有 polyfills 的 SystemJS 格式捆绑包。
来源： packages/plugin-legacy/src/index.ts590-722 packages/plugin-legacy/src/snippets.ts
该插件通过代码分析和浏览器目标，实现自动 polyfill 检测和注入
polyfill 系统使用 Babel 的 preset-env 来分析代码，根据实际使用模式和浏览器目标检测所需的 polyfills。它为现代和旧版构建生成独立的 polyfill 代码块，并使用适当的加载属性注入它们。
来源： packages/plugin-legacy/src/index.ts744-775 packages/plugin-legacy/src/index.ts798-878 packages/plugin-legacy/src/index.ts881-902 packages/plugin-legacy/src/index.ts337-368
该插件为其内联脚本提供 CSP hash 值，以支持严格的内容安全策略要求
该系统为所有内联脚本生成 SHA-256 hash 值，并导出它们以供 CSP 配置使用。这确保了在保持功能的同时，与严格的安全策略兼容。
来源： packages/plugin-legacy/src/index.ts990-995 packages/plugin-legacy/README.md168-192