宣布 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 单文件组件的 hacky 原型。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，以便在开发过程中有效地加载和更新基于 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 用户进行讨论。