Vite 为何短短几年内变成这样？

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

本文适合对Vite感兴趣的小伙伴阅读。

前言

在 Web 开发领域，Vite 如今已如雷贯耳。

自 2020 年 4 月发布以来，Vite 的人气蒸蒸日上。目前 Vite 在 GitHub 上的收藏数量已超过 64k，每周下载量超过 1200 万次，现在为 Nuxt、Remix、Astro 等大多数开源框架提供支持。

尽管众口嚣嚣，我们意识到许多开发者可能仍然不熟悉 Vite 是什么鬼物，也不熟悉 Vite 在推动现代 Web 框架和工具的开发中扮演的重要角色。

在本文中，我们将科普 Vite 的知识储备，以及 Vite 如何在短短几年后发展成为现代 Web 的重量级角色。

Vite 是什么鬼物

Vite 的发音为 /vit/，在法语中是“快速”或“迅捷”的意思，不得不说 Vite 名副其实。

简而言之，Vite 是一种现代 JS 构建工具，为常见 Web 模式提供开箱即用的支持和构建优化，兼具 rollup 的自由度和成熟度。

Vite 还与 esbuild 和原生 ES 模块强强联手，实现快速无打包开发服务器。

Vite 是由“Vue 之父”尤雨溪（Evan You）构思出来的，旨在通过减少开发者在启动开发服务器和处理文件编辑后重载时遭遇的性能瓶颈，简化打包过程。

Vite 的核心特性

运行 Vite 时，你会注意到的第一个区别在于，开发服务器会即时启动。

这是因为，Vite 采用按需方法将你的应用程序提供给浏览器。Vite 不会首先打包整个源码，而是响应浏览器请求，将你编写的模块即时转换为浏览器可以理解的原生 ESM 模块。

Vite 为 TS、PostCSS、CSS 预处理器等提供开箱即用的支持，且可以通过不断增长的插件生态系统进行扩展，支持所有你喜欢的框架和工具。

每当你在开发期间更改项目中的任意文件时，Vite 都会使用应用程序的模块图，只热重载受影响的模块（HMR）。这允许开发者预览他们的更改，及其对应用程序的影响。

Vite 的 HMR 速度惊人，可以让编辑器自动保存，并获得类似于在浏览器开发工具中修改 CSS 时的反馈循环。

Vite 还执行 依赖预构建（dependency pre-bundling）。在开发过程中，Vite 使用 esbuild 来打包你的依赖并缓存，加快未来服务器的启动速度。

此优化步骤还有助于加快 lodash 等导出许多迷你模块的依赖的加载时间，因为浏览器只加载每个依赖的代码块（chunk）。这还允许 Vite 在依赖中支持 CJS 和 UMD 代码，因为它们被打包到原生 ESM 模块中。

当你准备好部署时，Vite 将使用优化的 rollup 设置来构建你的应用程序。Vite 会执行 CSS 代码分割，添加预加载指令，并优化异步块的加载，无需任何配置。

Vite 提供了一个通用的 rollup 兼容插件 API，适用于开发和生产，使你可以更轻松地扩展和自定义构建过程。

Vite 的优势

开源且独立

Vite 由开源开发者社区“用爱发电”，由来自不同背景的开发者团队领导，Vite 核心仓库最近贡献者数量已突破 900 人。

Vite 得到积极的开发和维护，不断实现新功能并解决错误。

本地敏捷开发

开发体验是 Vite 的核心，每次点击保存时，你都能感受到延迟。我们常常认为重载速度是理所当然的。

但随着您的应用程序增长，且重载速度逐渐停止，你将感恩 Vite 几乎能够保持瞬间重载，而无论应用程序大小如何。

广泛的生态系统支持

Vite 的方案人气爆棚，大多数框架和工具都默认使用 Vite 或拥有一流的支持。通过选择使用 Vite 作为构建工具，这些项目维护者可以在它们之间共享一个统一基建，且随着时间的推移共同改良 Vite。

因此，它们可以花更多的时间开发用户需要的功能，而减少重新造轮子的时间。

易于扩展

Vite 对 rollup 插件 API 的押注得到了回报。插件允许下游项目共享 Vite 核心提供的功能。

我们有很多高质量的插件可供使用，例如 vite-plugin-pwa 和 vite-imagetools。

框架构建难题中的重要角色

Vite 是现代元框架构建的重要组成部分之一，这是一个更大的工具生态系统的一部分。

Volar 提供了在代码编辑器中为 Vue、MDX 和 Astro 等自定义编程语言构建可靠且高性能的编辑体验所需的工具。Volar 允许框架向用户提供悬停信息、诊断和自动补全等功能，并共享 Volar 作为为它们提供支持的通用基建。

另一个很好的例子是 Nitro，它是一个服务器工具包，用于创建功能齐全的 Web 服务器，开箱即用地支持每个主要部署平台。Nitro 是一个与框架无关的库 UnJS 的奇妙集合的一部分。

Vite 的未来

在最近的 ViteConf 大会的演讲中，尤雨溪表示，虽然 Vite 取得了巨大进展，但仍面临一些已知的问题和挑战。

Vite 目前使用 rollup 进行生产构建，这比 esbuild 或 Bun 等原生打包器慢得多。

Vite 还尽可能减少开发和生产环境之间的不一致性，但考虑到 rollup 和 esbuild 之间的差异，某些不一致性无法避免。

尤雨溪现在领导一个新团队开发 rolldown，这是一个基于 Rust 的 rollup 移植，在 “JS 氧化编译器 OXC”之上构建了最大的兼容性。

这个主意是用 rolldown 替代 Vite 中的 rollup 和 esbuild。Vite 将拥有一个单独基建，兼具 rollup 的自由度和 esbuild 的速度，消除不一致性，使代码库更易于维护，并加快构建时间。

rolldown 目前处于早期阶段，但已经显示出有希望的结果。rolldown 现已开源，rolldown 团队正在寻找贡献者来辅助实现这一愿景。

与此同时，Vite 团队在每个版本中不断改良 Vite。这项工作从上游的为 Vitest 和 Nuxt Dev SSR 提供动力的引擎 vite-node 开始，现已发展成为框架作者对 Vite API 的完整修订版。

新版 Environment API 预计在 Vite 6 中发布，这将是自 Vite 2 发布以来 Vite 最大的变化之一。这将允许在任意数量的环境中通过 Vite 插件管道运行代码，解锁对 worker、RSC 等的一流支持。

Vite 正在开辟一条前进的道路，并迅速成为 JS 生态系统事实上的构建工具。

参考文献

Vite：https://vitejs.dev

Blog：https://blog.stackblitz.com/posts/what-is-vite-introduction

Rolldown：https://rolldown.rs

最后

往期推荐

创业一年 ， 一名普通前端的血泪史

前端在本地开发还能用https？

开发阶段！跨域问题多种解决方案的精华总结

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧