Vite - more than just a build tool

It’s been two years since vite released its first version (2020-04), and it recently released 3.0, though without many break change changes. Some people may already be using it, but many others see that it’s a tool created by vue authors and walk around it, because tools in the vue ecosystem are traditionally vue-locked and can’t be used in other ecosystems, like vuex/pinia, while redux/mobx can be used in vue. Although vite 1.0 only supports vue by default, everything changed in 2.0 and no longer supports any framework by default (well, actually react by default due to esbuild), but rather the framework is supported through plugins.

The following ui frameworks are currently supported by default.

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

Some of the unofficial support is as follows.

• solid.js
• qwik

Famous tools that depend on vite

• vitest: a unit testing tool that is fast, supports esm by default, is compatible with the jest api and can be seen as a better jest
• vitepress: a very fast document generator, with an order of magnitude performance difference with other tools in case of very large number of documents (e.g. 1k+)
• tauri: Build smaller, faster, and more secure desktop applications with a web frontend.
• astro: a vite based build tool

In fact, there are currently 1k+ packages in npm that depend directly on vite, see: https://www.npmjs.com/package/vite?activeTab=dependents

vitest

By default, it supports the following features that I am interested in.

• Very fast
• esm support
• ts support
• jest api compatible
• support for vite features
• support for multiple frameworks react/vue

Currently, several of the community monorepo projects I mainly maintain have been migrated to esm, and the testing tools are all from jest => vitest, after all it really works too well.

ref: https://vitest.dev/

vitepress

Performance.

Basic site information.

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

Word count.

1
2

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

There appears to be an order of magnitude performance difference between vitepress and other generators as the number of documents rises. In the following example, the build time for 1000 md documents is about 20 times different

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

Practical testing on a larger documentation project.

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

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

Conclusion

vite’s predecessor, snowpack, is dead, but the legacy it left behind is being carried forward by vite and is expanding into a larger community and infrastructure for the front-end development toolchain.

ps1: In fact, I’ve been using vite for all my production projects, and although I’ve encountered some marginal problems like dev being too slow and build exceeding memory limits, it’s still the best web build tool for DX in general.

ps2: Interestingly, the previous front-end tools were scattered and fragmented, e.g. webpack for bundles, typescript/babel for translations, various loader for custom resources, and a lot of configuration and debugging before you could get your project up and running. Not to mention that the configuration and tools are often different between multiple frameworks, which makes cross-framework sharing really bad. But vite, on the contrary, supports all common features by default, and multiple frameworks only need to introduce the corresponding framework plug-ins, and only when needed, you need to delve into plug-ins and configuration.