大家好，我是前端宝哥。

最近，Vite 真是火得不行，几乎每天都能看到关于它的讨论。这个工具到底有多厉害？它为什么这么火？

自从 2020 年 4 月发布以来，Vite 的人气一路飙升。在 GitHub 上已经获得了 64k+ 的星标，每周的下载量更是超过了 1200 万次！ 现在很多热门的框架，比如 Nuxt, SvelteKit, Astro, SolidStart 还有 Remix 等等，都用 Vite 作为构建工具。

就连 StackBlitz 这种牛逼的在线开发平台，也从 2021 年起就坚定地支持 Vite，并且他们的核心团队里还包括了 Vite 的核心维护者 patak。StackBlitz 还举办了 ViteConf，专门展示 Vite 生态系统。

如果想了解 Vite 的历史，可以看看 Evan You 在 ViteConf 2022 的主题演讲，讲得非常精彩！

好了，回到正题，Vite 到底是什么？

Vite 是什么？

Vite 在法语里是 “快速” 的意思，它确实做到了！

简单来说，Vite 就是一个现代的 JavaScript 构建工具，它能让你快速构建 Web 应用。它支持常见的 Web 开发模式，并且结合了 Rollup 的灵活性和 esbuild 的速度，让你体验流畅的开发体验。

Vite 是 Vue.js 的创始人 Evan You 创建的，他就是想让构建过程更简单，解决开发人员在启动开发服务器和更新代码时遇到的瓶颈。

Vite 的核心功能

Vite 的开发服务器启动速度简直快到飞起！你可以在 vite.new 上感受一下。这是因为 Vite 采用了一种按需加载的方式，它不会一次性加载所有代码，而是根据浏览器的请求，实时地将代码转化成浏览器可以理解的格式。

Vite 自带了很多实用的功能，例如：

• 支持 TypeScript、PostCSS、CSS 预处理器、JSON、WASM 等等。

• 支持各种框架和工具，并且拥有不断增长的插件生态系统。

每次修改代码时，Vite 都会通过模块图，只更新需要更新的部分，这就是我们常说的热重载 (HMR)。 速度快到让你怀疑人生！

Vite 还会预先打包依赖项，使用 esbuild 将依赖项捆绑成一个包，并进行缓存，这样下次启动服务器的速度会更快。

当你准备部署应用时，Vite 会使用 Rollup 来构建你的应用程序。它会自动执行 CSS 代码拆分、添加预加载指令，优化异步块的加载，而且不需要任何配置！

使用 Vite 的优势

Vite 有很多优势，下面是几个我最喜欢的：

• 开源且独立：  Vite 由一个庞大的开源社区开发和维护，这确保了它能够持续更新，不断改进。

• 快速本地开发：  每次保存代码后，几乎是瞬间刷新，这对于大型项目来说非常重要。

• 广泛的生态系统支持：  很多框架和工具都默认使用 Vite，因为它确实很强大！

• 易于扩展：  Vite 使用 Rollup 的插件 API，可以方便地添加各种功能，例如 vite-plugin-pwa 和 vite-imagetools 等等。

Vite 是框架构建的关键

Vite 已经成为了很多现代框架的基础，例如：

• Volar：一个帮助我们在编辑器中更方便地开发 Vue、MDX、Astro 等语言项目的工具。

• Nitro：用于创建全功能 Web 服务器的工具包。

• UnJS：一系列框架无关的库，包括 Nitro。

开始你的第一个 Vite 项目

想要体验 Vite 的速度和便捷，最简单的方法就是亲自动手试试！ StackBlitz 提供了对 Vite 的全面支持，你可以直接在线创建一个项目，并体验它的强大功能！

https://vite.new/vue-ts

使用 Vite 开发

在开发过程中，你可以运行这三个命令：

• vite dev 启动 Vite 开发服务器

• vite build 构建生产环境代码

• vite preview 预览构建好的网站或应用程序

记住，在运行 vite preview 之前，需要先运行 vite build 来构建代码。

Vite 的未来

Evan 在最近的 ViteConf 主题演讲 中，分享了 Vite 的进展，但也提到了项目面临的一些挑战。

目前，Vite 使用 Rollup 来构建生产环境代码，而 Rollup 的速度不如 esbuild 或者 Bun 这些原生打包工具。Vite 尽力减少开发和生产环境的差异，但是由于 Rollup 和 esbuild 的不同，一些差异是无法避免的。

Evan 现在正在领导一个团队开发 Rolldown，一个基于 Rust 的 Rollup 移植版本，目标是用它来替换 Vite 中的 Rollup 和 esbuild。 Rolldown 已经取得了不错的进展，而且现在是开源的，欢迎大家一起参与！

同时，Vite 团队也在不断改进 Vite，例如：

• 推出了新的 环境 API，这个 API 非常强大，可以帮助开发者在不同环境中使用 Vite 插件，比如 workerd、RSC 等等。

Vite 正在成为 JavaScript 生态系统中不可或缺的一部分，相信未来会越来越强大！

快去试试 https://vite.new ，体验一下 Vite 的魅力吧！

---

往期推荐

Vue 单页面应用中，不要在 onMount 里添加事件监听器！

38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集

Vue 如何处理异步组件加载错误

Vue 3 响应式状态揭秘：ref() 函数的魔法

Vue 3 将推出新特性，可以抛弃虚拟DOM了！

Vue 小技巧：何时使用可组合函数

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

关注我，明天见！

⭐星标前端开发博客，好内容不错过⭐

觉得好看，请关注我，点“在看”