All in Vite

本文最后更新于: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 相关的博客。

vite

vitest

vite-node

vitepress

结语

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


All in Vite
https://blog.rxliuli.com/p/ccdf84366137442c95bacac5d9ecd81d/
作者
rxliuli
发布于
2024年3月20日
许可协议