发布 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选择性地支持旧版浏览器。该插件会自动生成双现代/旧版 bundles，并根据浏览器特性检测提供正确的 bundle，确保在支持它们的现代浏览器中提供更高效的代码。

立即尝试！

以上介绍了许多功能，但开始使用 Vite 非常简单！您可以在一分钟内启动一个基于 Vite 的应用程序，只需运行以下命令（请确保您的 Node.js 版本 >=12）：

npm init @vitejs/app

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