All in Vite
本文最后更新于:2024年3月25日 凌晨
前言
自 vite 发布之后已经过去了 4 年,在和推友交流时意外发现现在仍然有人不知道 vite 和周边工具能做什么,或者认为只适用于 vue 项目。但实际上,它已经可以满足开发绝大多数前端程序的需求,自从 2021 年转向 vite 之后,从未回头。
为什么
就吾辈的使用经验而言,问题在于初始 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 相关的博客。
vite
vitest
vite-node
vitepress
结语
vite 已经在 23 年 11 月发布了 vite@5,似乎除了 react 官方/nextjs 社区之外的前端框架都开始逐步采用 vite,尤其是较新的一些框架,希望之后 rolldown 可以让它发展的更好吧。