Vite 2.0 正式发布

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

Vite（法语中意为“快速”，发音为/vit/）是一种用于前端 Web 开发的新型构建工具。它类似于预配置的开发服务器 + 打包器组合，但更精简、更快速。它利用浏览器原生的 ES 模块支持以及使用esbuild等可编译为原生语言的工具，提供快速便捷的现代开发体验。

为了让您了解 Vite 的速度有多快，这里有一个使用 Vite 与create-react-app（CRA）在 Repl.it 上启动 React 应用程序的视频比较：

如果您从未听说过 Vite，并希望了解更多信息，请查看该项目背后的理念。如果您想知道 Vite 与其他类似工具的区别，请查看比较。

2.0 中的新功能

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

框架无关核心

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

Vite 2.0 汲取了我们一路走来的经验教训，并全新设计，拥有更强大的内部架构。现在，它完全与框架无关，所有框架特定的支持都委托给了插件。现在，Vite 2.0 提供了Vue、React、Preact、Lit Element 的官方模板，并且社区正在持续努力实现 Svelte 集成。

新的插件格式和 API

受WMR的启发，新的插件系统扩展了 Rollup 的插件接口，并与许多 Rollup 插件兼容。插件可以使用与 Rollup 兼容的钩子，以及额外的 Vite 专用钩子和属性来调整 Vite 独有的行为（例如，区分开发环境和构建环境，或自定义 HMR 处理）。

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

esbuild 支持 Dep 预捆绑

由于 Vite 是一个原生的 ESM 开发服务器，它预先打包了依赖项，以减少浏览器请求数量并处理 CommonJS 到 ESM 的转换。之前 Vite 使用 Rollup 来实现这一点，而在 2.0 版本中，它使用 Rollupesbuild实现了这一点，从而使依赖项预打包速度提高了 10 到 100 倍。作为参考，在搭载 M1 处理器的 Macbook Pro 上，冷启动一个包含大量依赖项（例如 React Meterial UI）的测试应用之前需要 28 秒，现在只需约 1.5 秒。如果您从传统的基于打包器的设置切换过来，预计也会有类似的改进。

一流的 CSS 支持

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

• 解析器增强：使用 Vite 的解析器增强了 CSS 中的@import路径url()，以尊重别名和 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，并根据浏览器特性检测提供合适的 bundles，确保在支持这些浏览器的现代浏览器中代码更高效。

尝试一下！

虽然功能很多，但 Vite 的使用非常简单！只需一分钟，你就可以启动一个基于 Vite 的应用，只需使用以下命令即可（请确保你的 Node.js 版本 >=12）：

npm init @vitejs/app

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