All in Vite - rxliuli blog

rxliuli blog

本文最后更新于：2024年3月25日 凌晨

自 vite 发布之后已经过去了 4 年，在和推友交流时意外发现现在仍然有人不知道 vite 和周边工具能做什么，或者认为只适用于 vue 项目。但实际上，它已经可以满足开发绝大多数前端程序的需求，自从 2021 年转向 vite 之后，从未回头。

1711337591562.jpg

就吾辈的使用经验而言，问题在于初始 DX 差距很大，webpack 一开始就堆了一堆必须了解的概念，vite 可以立即用起来，然后根据需要逐步了解学习，这是两种不同的 DX 体验。例如吾辈也为 vite 写了一些插件，有些是公开的，有些是为公司内部定制的，但无论何时都会说 DX 体验比 webpack 更好，好得多。
也许有人更喜欢先通读一大篇文档，然后再开始使用。吾辈通常习惯先用起来，有问题再去检索和看文档，这也是设计好坏的很容易区分的地方。面向普通用户的应用已然如此（不谈某些不看说明书不能用的产品的话），没道理开发者要被迫忍受糟糕的 DX 体验。
另外吾辈当然承认 vite 有问题，而且确实在某些地方很烦人，例如有大量小文件时的内存性能、或者 ssr 对特定框架支持仍然需要单独进行的问题，但这些都不能掩盖它的优秀之处，即解决了许多 DX 问题，包括性能（借助 esbuild 之类）和多框架构建工具体验不一致的问题。

吾辈使用到的一些基于 vite 的相关工具。

• vite: 下一代的前端工具链，为开发提供极速响应
• vitest: 基于 vite 的测试框架，开箱即用的支持 ts/esm
• vite-node: 基于 vite 的 esno/tsx/ts-node 的平替工具
• vitepress: 基于 vite 生成静态文档站，它非常快！
• crxjs: 基于 vite 为 chrome 插件开发提供更好的 DX
• electron-vite: 基于 vite 为 electron 提供更好的 DX
• tauri: 基于 rust 的桌面跨端框架，web 部分官方使用 vite

吾辈自己也写过一些相关的插件之类的，目前最常用的是 vite-plugin-node，主要是用来开发 lib/cli/vscode/node 服务端程序等等。

还有一些吾辈不使用，但也很流行的工具也是基于或转向 vite。

• wails: 和 tauri 相同，但使用 golang 作为后端，前端部分也使用 vite
• preact: 最近转向了 vite 作为官方推荐开发工具，开发了 @preact/vite-plugin 插件
• solid: 使用 vite 作为官方推荐开发工具
• svelte: 基于 vite 实现了 sveltekit
• astro: 基于 vite 构建的专注于内容网站的框架
• remix: 另一种与 next 不同的 ssr 方案

还有更多，请检查 awesome-vite。

下面是之前写过的一些 vite 相关的博客。

vitest

• 使用 vitest 做单元测试。

vite-node

• 使用 vite 开发和构建 nodejs 应用。

vitepress

vite 已经在 23 年 11 月发布了 vite@5，似乎除了 react 官方/nextjs 社区之外的前端框架都开始逐步采用 vite，尤其是较新的一些框架，希望之后 rolldown 可以让它发展的更好吧。