跳转到内容

宣布 Vite 2.0

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

今天,我们非常激动地宣布 Vite 2.0 正式发布!

Vite(法语意为“快速”,发音为 /vit/)是一种面向前端开发的全新构建工具。可以将其想象为:一个预配置的开发服务器 + 打包器的组合,但更精简、更快速。它利用浏览器对 原生 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 倍。作为参考,此前在 M1 芯片的 MacBook Pro 上启动一个包含大量依赖项(如 React Material UI)的测试应用需要 28 秒,现在仅需约 1.5 秒。如果你正从传统的基于打包器的设置切换过来,期待获得相似的性能提升。

一流的 CSS 支持

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

  • 解析器增强:CSS 中的 @importurl() 路径通过 Vite 的解析器进行了增强,从而支持别名(alias)和 npm 依赖项。
  • URL 重定向:无论文件从何处引入,url() 路径都会被自动重定向。
  • CSS 代码分割:代码分割后的 JS 分块(chunk)也会输出相应的 CSS 文件,当 JS 分块被请求时,该 CSS 文件会自动并行加载。

服务端渲染 (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):

bash
npm init @vitejs/app

接下来,请查看 指南 以了解 Vite 开箱即用提供的功能。你也可以在 GitHub 上查看源代码,在 Twitter 上关注更新,或者在我们的 Discord 聊天服务器 上与其他 Vite 用户讨论。