在Web开发的大千世界里，想要不听到关于Vite[1]的讨论，那可真是难上加难。
自2020年4月发布以来，Vite的人气就像坐了火箭一样直线上升。截至写这篇文章的时候，这个项目在GitHub上已经获得了超过64k的star，并且在每周的npm下载量上超过了1200万，现在它支持着大多数开源框架，比如Nuxt[2]、SvelteKit[3]、Astro[4]、SolidStart[5]和Remix[6]（这只是冰山一角）。
image.png
如果你想了解Vite的历史，推荐你观看Evan You在ViteConf 2022上的主旨演讲[7]。
尽管Vite声名鹊起，但我们意识到许多开发者可能仍然不熟悉Vite是什么，或者它在推动现代Web框架和工具开发中扮演的关键角色。
在这篇文章中，我们将为你提供一个关于Vite的入门指南，以及它是如何在短短几年内成长为现代Web的中坚力量。
Vite是什么？
Vite的发音是/vit/，在法语中意味着“快速”或“迅速”，而且Vite绝对不负其名。
简单来说，Vite[8]是一个现代JavaScript构建工具，它为常见的Web模式提供了开箱即用的支持，提供了优化的构建，结合了rollup[9]的灵活性和成熟度，以及由esbuild[10]实现的快速无捆绑开发服务器和原生ES模块。
Vite由Vue.js[11]的创造者Evan You[12]构思，目的是通过减少开发者在启动开发服务器和文件编辑后处理重新加载时遇到的瓶颈来简化打包过程。
Vite的核心特性
当你运行Vite时，你会注意到的第一个不同是开发服务器几乎是瞬间启动的。你可以访问vite.new[13]并亲眼见证。这是因为Vite采用了按需服务的方式来将你的应用程序提供给浏览器。Vite不是首先打包整个源代码，而是根据浏览器的请求，实时将你编写的模块转换为浏览器能够理解的原生ESM模块。Vite开箱即支持TypeScript、PostCSS、CSS预处理器、JSON、WASM等，并且可以通过不断增长的插件生态系统扩展来支持你所有喜爱的框架和工具。
在开发过程中，每当你在项目中更改任何文件时，Vite都会使用应用程序的模块图只热重载受影响的模块（HMR）。这允许开发者预览他们的更改以及这些更改对应用程序的影响。Vite HMR的速度非常快，以至于可以允许编辑器自动保存，获得类似于在浏览器开发工具中修改CSS时的反馈循环。
Vite还执行依赖预打包。在开发过程中，它使用esbuild捆绑你的依赖项并将它们缓存起来，以加快未来的服务器启动速度。这个优化步骤还有助于加快加载时间，特别是对于导出许多小模块的依赖项（如lodash），因为浏览器每个依赖项只加载几个块而不是多个。它还允许Vite支持CommonJS和UMD代码中的依赖项，因为它们被捆绑成原生ESM模块。
当你准备部署时，Vite将使用优化的Rollup设置构建你的应用程序。它执行CSS代码拆分，添加预加载指令，并优化异步块的加载，无需任何配置。Vite提供了一个通用的与Rollup兼容的插件API，适用于开发和生产，使其更容易扩展和自定义你的构建过程。
使用Vite的好处
使用Vite有几个关键好处[14]。以下是我们最喜欢的一些：
开源和独立
Vite是由一群开源开发者开发的，由来自不同背景的开发团队[15]带头。Vite核心仓库最近已经超过900个贡献者。它正在积极开发和维护，新功能不断实现，漏洞也在稳定地得到修复。这也意味着不断发展的功能集反映了大量多样化产品的真实应用需求的交叉部分。
快速的本地开发
开发体验（DX）是Vite的核心，每次保存时你都能感受到它。我们常常认为重新加载的速度是理所当然的。但随着你的应用程序增长，重新加载速度逐渐变慢，你会感激Vite保持（几乎）即时重新加载的能力，无论应用程序大小如何。
广泛的生态系统支持
Vite的方法受到了非常好的接受，大多数框架和工具默认使用Vite或提供一流的支持。通过选择Vite作为构建工具，这些项目的维护者可以在它们之间共享一个共同的基础，并随着时间的推移共同改进它。因此，他们可以花更多的时间开发用户需要的功能，而不是重新发明轮子。
这对每个人都是双赢的。
易于扩展
Vite对Rollup插件API的赌注得到了回报。插件允许下游项目共享Vite核心提供的功能。有许多高质量的插件可供使用，如vite-plugin-pwa[16]和vite-imagetools[17]。
框架构建难题中的重要一块
Vite是现代元框架正在构建的大块之一。它是正在采取类似路径的更大工具生态系统的一部分。Volar[18]是StackBlitz团队自豪支持的另一个工具。它为自定义编程语言（如Vue、MDX和Astro）提供了在代码编辑器中构建坚实且高效编辑体验所需的工具。它允许框架为其用户提供悬停信息、诊断和自动补全等功能，共享Volar作为共同基础来为它们提供动力。另一个绝佳的例子是Nitro[19]，一个服务器工具包，用于创建支持每个主要部署平台的全功能Web服务器。它是一系列框架无关的库UnJS[20]的一部分。还有Dev Toolkit[21]，这是一个新的努力，旨在为框架开发工具共享一个共同的基础。
开始使用Vite
对于像StackBlitz和Vite这样的工具，理解它们为何不同最好的方式就是亲自尝试。Vite在StackBlitz中得到了全面支持[22]，这使得创建按需环境变得轻而易举。Vite团队使用StackBlitz来驱动其在线启动器[23]。点击你最喜欢的框架，编辑一些组件，看看Vite是如何工作的。
使用Vite开发
在使用Vite开发时，你可以运行三个命令。
vite dev启动Vite开发服务器（当你在StackBlitz中打开Vite项目时，它会自动为你启动）vite build准备生产构建vite preview允许你预览你构建的网站或应用程序
确保在运行vite preview之前运行vite build，以查看你的更改。
Vite的未来
在最近的ViteConf主题演讲[24]中，Evan分享了尽管Vite正在取得巨大进步，但项目仍面临一些已知的问题和挑战。
正如我们之前讨论的，Vite目前使用Rollup进行生产构建。这并不像esbuild或Bun这样的原生打包器那样快。Vite还尽可能地减少了开发环境和生产环境之间的不一致性，但由于Rollup和esbuild之间的差异，一些不一致性是不可避免的。
Evan现在带领一个新团队开发Rolldown[25]，这是一款基于Rust的Rollup端口，建立在OXC[26]（JavaScript氧化编译器）之上，力求与Rollup兼容。这个想法是用Rolldown替换Vite中的Rollup和esbuild。Vite将拥有一个单一的基础，结合了Rollup的灵活性和esbuild的速度，消除了不一致性，使代码库更易于维护，并加快了构建时间。
Rolldown目前还处于早期阶段，但已经显示出了有希望的结果。该项目现在已开源，Rolldown团队正在寻找贡献者来帮助实现这一愿景。
与此同时，Vite团队在每个版本中都在不断改进Vite。由Vitest[27]和Nuxt Dev SSR[28]驱动的引擎vite-node[29]的工作已经开始，演变成Vite API的全面修订，面向框架作者。新的环境API[30]预计将在Vite v6中发布，它将成为自Vite 2发布以来Vite最大的变化之一。它将允许在任何数量的环境中通过Vite插件管道运行代码，解锁了对workers、RSC等的一级支持。
总结
Vite正在开辟一条前进的道路，并且正在迅速成为JavaScript生态系统中的标准构建工具。
StackBlitz很自豪能够成为Vite的支持者，我们期待看到2024年项目如何发展！
今天就试试https://vite.new[31]，并关注更多Vite相关新闻[32]。
本文译自：https://blog.stackblitz.com/posts/what-is-vite-introduction/
Reference
[1]
Vite: https://vitejs.dev/
[2]
Nuxt: https://nuxt.com/
[3]
SvelteKit: https://kit.svelte.dev/
[4]
Astro: https://astro.build/
[5]
SolidStart: https://start.solidjs.com/
[6]
Remix: https://remix.run/
[7]
Evan You在ViteConf 2022上的主旨演讲: https://viteconf.org/23/replay/vite_keynote
[8]
Vite: https://vitejs.dev/guide/
[9]
rollup: https://rollupjs.org/
[10]
esbuild: https://esbuild.github.io/
[11]
Vue.js: https://vuejs.org/
[12]
Evan You: https://twitter.com/youyuxi
[13]
vite.new: https://vite.new/
[14]
关键好处: https://vitejs.dev/guide/why.html
[15]
开发团队: https://vitejs.dev/team
[16]
vite-plugin-pwa: https://vite-pwa-org.netlify.app/
[17]
vite-imagetools: https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite
[18]
Volar: https://volarjs.dev/
[19]
Nitro: https://nitro.unjs.io/
[20]
UnJS: https://unjs.io/
[21]
Dev Toolkit: https://www.youtube.com/watch?v=E6kTiIbU3N8
[22]
全面支持: https://blog.stackblitz.com/posts/vite-new-templates/
[23]
在线启动器: https://vitejs.dev/guide/#trying-vite-online
[24]
最近的ViteConf主题演讲: https://viteconf.org/23/replay/vite_keynote
[25]
Rolldown: https://chat.rolldown.rs/
[26]
OXC: https://oxc-project.github.io/
[27]
Vitest: https://vitest.dev/
[28]
Nuxt Dev SSR: https://antfu.me/posts/dev-ssr-on-nuxt
[29]
vite-node: https://github.com/vitest-dev/vitest/tree/main/packages/vite-node#readme
[30]
环境API: https://github.com/vitejs/vite/discussions/16358
[31]
https://vite.new: https://vite.new/
[32]
Vite相关新闻: https://blog.stackblitz.com/tags/vite/
