发布 Vite 2.0

2021 年 2 月 16 日 - 查看 Vite 3.0 公告

今天，我们很高兴地宣布 Vite 2.0 正式发布！

Vite（法语单词，意为“快速”，发音为/vit/）是一种用于前端 Web 开发的新型构建工具。可以把它想象成一个预配置的开发服务器 + 捆绑器组合，但更精简、速度更快。它利用浏览器的 原生 ES 模块 支持以及用编译为原生语言（如 esbuild）编写的工具来提供快速且现代化的开发体验。

要了解 Vite 的速度有多快，请查看 此视频比较，其中在 Repl.it 上使用 Vite 与create-react-app (CRA) 启动 React 应用程序。

如果您以前从未听说过 Vite，并且希望了解更多信息，请查看 该项目背后的原理。如果您有兴趣了解 Vite 与其他类似工具的不同之处，请查看 比较。

2.0 中的新功能

由于我们在 1.0 发布 RC 版之前决定彻底重构内部结构，因此这实际上是 Vite 的第一个稳定版本。也就是说，与之前的版本相比，Vite 2.0 带来了许多重大改进。

框架无关的核心

Vite 的最初想法是作为一个 通过原生 ESM 提供 Vue 单文件组件的简陋原型。Vite 1 是该想法的延续，在其基础上实现了 HMR。

Vite 2.0 汲取了我们在这一过程中的经验教训，并从头开始重新设计，采用了更强大的内部架构。它现在完全与框架无关，所有特定于框架的支持都委托给插件。现在有 Vue、React、Preact、Lit Element 的官方模板，以及 Svelte 集成的持续社区努力。

新的插件格式和 API

受 WMR 的启发，新的插件系统扩展了 Rollup 的插件接口，并且 与许多 Rollup 插件兼容。插件可以使用 Rollup 兼容的钩子，并使用其他特定于 Vite 的钩子和属性来调整仅 Vite 的行为（例如，区分开发与构建或自定义处理 HMR）。

编程 API 也得到了极大的改进，以便于在 Vite 之上构建更高级别的工具/框架。

esbuild 支持的依赖项预捆绑

由于 Vite 是一个原生 ESM 开发服务器，因此它会预先捆绑依赖项以减少浏览器请求数量并处理 CommonJS 到 ESM 的转换。以前 Vite 使用 Rollup 执行此操作，而在 2.0 中，它现在使用esbuild，这使得依赖项预捆绑速度提高了 10 到 100 倍。作为参考，使用 React Material UI 等大量依赖项的测试应用程序的冷启动以前在配备 M1 的 MacBook Pro 上需要 28 秒，现在需要约 1.5 秒。如果您从基于传统捆绑器的设置切换，则可以预期类似的改进。

一流的 CSS 支持

Vite 将 CSS 视为模块图的一等公民，并开箱即用地支持以下功能：

• 解析器增强：CSS 中的@import 和url() 路径通过 Vite 的解析器进行增强，以尊重别名和 npm 依赖项。
• URL 重定基准：无论从哪里导入文件，url() 路径都会自动重定基准。
• CSS 代码拆分：代码拆分的 JS 块还会发出相应的 CSS 文件，在请求时会与 JS 块并行自动加载。

服务器端渲染 (SSR) 支持

Vite 2.0 附带 实验性的 SSR 支持。Vite 提供 API，以便在开发过程中有效地在 Node.js 中加载和更新基于 ESM 的源代码（几乎就像服务器端 HMR），并自动将兼容 CommonJS 的依赖项外部化，以提高开发和 SSR 构建速度。生产服务器可以完全与 Vite 脱钩，并且相同的设置可以轻松地适应执行预渲染/SSG。

Vite SSR 作为一项低级功能提供，我们预计会看到更高级别的框架在幕后利用它。

选择加入的旧版浏览器支持

Vite 默认情况下以支持原生 ESM 的现代浏览器为目标，但您也可以通过官方的 @vitejs/plugin-legacy 选择加入对旧版浏览器的支持。该插件会自动生成现代/旧版双重捆绑包，并根据浏览器功能检测提供正确的捆绑包，确保在支持它们的现代浏览器中更有效地使用代码。

试一试！

功能很多，但开始使用 Vite 非常简单！您可以从以下命令开始，在短短一分钟内启动一个由 Vite 提供支持的应用程序（确保您拥有 Node.js >=12）：

npm init @vitejs/app

然后，查看 指南，了解 Vite 开箱即用地提供了什么。您还可以查看 GitHub 上的源代码，关注 Twitter 上的更新，或在我们 Discord 聊天服务器 上与其他 Vite 用户进行讨论。