vite-不仅仅是一个构建工具

本文最后更新于:2022年10月13日 凌晨

自 vite 发布第一个版本(2020-04)以来,已经过去了两年,最近它发布了 3.0,不过没有太多 break change 的变化。或许有人已经在使用它了,但也有许多人看到是 vue 作者创建的工具就绕道走过去,因为 vue 生态里的工具历来是 vue 锁定,无法在其他生态中使用,像是 vuex/pinia 之类的,而 redux/mobx 却可以在 vue 中使用。尽管 vite 1.0 默认仅支持 vue,但在 2.0 中改变了一切,默认不再支持任何框架(好吧,由于 esbuild 的原因,其实是默认支持 react 的),而是通过插件完成对框架的支持。

目前已默认支持的 ui 框架

  • vanilla
  • vue
  • react
  • preact
  • lit
  • svelte

一些非官方的支持

  • solid.js
  • qwik

依赖于 vite 的有名工具

  • vitest: 一个单元测试工具,它很快,默认支持 esm,兼容 jest api,可以被视为更好的 jest
  • vitepress: 一个非常快的文档生成器,在文档数量非常大的情况下(例如 1k+),与其他工具会有数量级的性能差距
  • tauri: 一个跨端应用开发工具
  • astro: 基于 vite 的构建工具

事实上,目前 npm 中统计有 1k+ 的包直接依赖于 vite,参考:https://www.npmjs.com/package/vite?activeTab=dependents

vitest

在默认情况下,它支持以下吾辈关注的功能

  • 很快
  • 支持 esm
  • 支持 ts
  • 兼容 jest api
  • 支持 vite 的功能
  • 支持多框架 react/vue

目前,吾辈主要维护的几个社区 monorepo 项目都已经迁移到了 esm,测试工具全部由 jest => vitest,毕竟它真的太好用了。

ref: https://vitest.dev/

vitepress

性能

类型 vitepress vuepress docusaurus
real 0m9.861s 0m18.649s 0m42.794s
user 0m0.015s 0m0.076s 0m0.077s
sys 0m0.151s 0m0.091s 0m0.106s

站点基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
$ cloc books/
83 text files.
83 unique files.
15 files ignored.

github.com/AlDanial/cloc v 1.94 T=0.52 s (158.4 files/s, 112091.4 lines/s)
-----------------------------------------------------
Language files blank comment code
-----------------------------------------------------
Markdown 83 29090 0 29645
-----------------------------------------------------
SUM: 83 29090 0 29645
-----------------------------------------------------

字数

1
2
$ find books/ -name '*.md' | xargs wc -m | tail -l
5071073 total

在文档数量上升之后,vitepress 和其他生成器之间似乎有数量级的性能差异。在下面这个例子中,1000 个 md 文档的构建时间大约是 20 倍的差异

ref: https://github.com/vuepress/vuepress-next/issues/994

在更大型的文档项目上实际测试

框架 时间
vitepress 1m56.019s
vuepress 14m18.764s
docusaurus 36m39.857s
1
2
3
4
5
6
7
8
9
10
11
12
13
$ cloc docs/
914 text files.
914 unique files.
0 files ignored.

github.com/AlDanial/cloc v 1.94 T=2.60 s (351.5 files/s, 319491.6 lines/s)
-------------------------------------------------------------------------------
Language files blank comment code
-------------------------------------------------------------------------------
Markdown 914 371604 0 459249
-------------------------------------------------------------------------------
SUM: 914 371604 0 459249
-------------------------------------------------------------------------------

这 nodejs,真香!
1665283372624.png

ref: https://vitepress.vuejs.org/

结语

vite 的前身 snowpack 虽然已经死了,但它留下的遗产却被 vite 发扬光大,并且在扩展成为更大的社区,成为前端开发工具链的基础设施。

ps1: 实际上,工作的生产项目已经全面使用 vite,虽然也遇到了一些边缘问题,例如 dev 过慢、build 超出内存限制之类的问题,但总体上仍然是目前 DX 最好的 web 构建工具。
ps2: 有趣的是,之前的前端工具分散而零碎,例如 webpack 负责 bundle、typescript/babel 负责转译、各种 loader 处理自定义的资源,一通配置与调试之后,你才可能将项目运行起来。更别说多个框架之间的配置和工具还往往不同,在跨框架共用方面实在糟糕。但 vite 却与之相反,默认支持所有常见功能,多框架只需要引入对应框架的插件即可,在需要时才需要深入研究插件和配置。


vite-不仅仅是一个构建工具
https://blog.rxliuli.com/p/0987a1de82694970851755d02920bc6e/
作者
rxliuli
发布于
2022年10月9日
许可协议