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

自 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

站点基本信息

$ 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
-----------------------------------------------------

字数

$ 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

$ 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，真香！

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

结语

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

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