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 正式发布前对内部实现进行彻底重构，因此这实际上是 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 倍。作为参考，在搭载 M1 芯片的 MacBook Pro 上，冷启动一个包含 React Material UI 等重型依赖的测试应用，此前需要 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 用户讨论交流。