vite – more than just a build tool

Original link: https://blog.rxliuli.com/p/0987a1de82694970851755d02920bc6e/

It’s been two years since vite released its first version (2020-04), and recently it released 3.0 without much break change. Maybe some people are already using it, but there are also many people who see the tools created by the vue author and take a detour, because the tools in the vue ecosystem have always been locked by vue and cannot be used in other ecosystems, such as vuex/pinia and so on. Yes, but redux/mobx can be used in vue. Although vite 1.0 only supports vue by default, everything has been changed in 2.0, no framework is supported by default (well, because of esbuild, react is supported by default), but framework support is done through plugins.

UI frameworks currently supported by default

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

some unofficial support

• solid.js
• qwik

Well-known tools that rely on vite

• vitest : a unit testing tool, it’s fast, supports esm by default, is compatible with jest api, can be considered a better jest
• vitepress : a very fast document generator, in the case of very large number of documents (such as 1k+), there will be an order of magnitude performance gap with other tools
• tauri : a cross-end application development tool
• astro : vite-based build tool

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

vitest

By default, it supports the following features

• soon
• support esm
• support ts
• Compatible with jest api
• Features that support vite
• Support multi-frame react/vue

At present, several community monorepo projects that we mainly maintain have been migrated to esm, and all the testing tools are jest => vitest. After all, it is really easy to use.

ref: https://vitest.dev/

vitepress

performance

Site Basic Information

 $ 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

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

There seems to be an order of magnitude performance difference between vitepress and other generators after the number of documents goes up. In the example below, the build time for 1000 md documents is about a 20x difference

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

Practical testing on larger documentation projects

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

This nodejs, really fragrant!

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

Epilogue

Although the predecessor of vite, snowpack, is dead, its legacy has been carried forward by vite and is expanding into a larger community and the infrastructure of the front-end development tool chain.

ps1: In fact, the working production project has fully used vite, although it has encountered some edge problems, such as the dev is too slow, the build exceeds the memory limit and other problems, but overall it is still the best web build tool for DX.
ps2: Interestingly, the previous front-end tools were scattered and fragmented. For example, webpack was responsible for bundles, typescript/babel was responsible for transpiling, and various loaders dealt with custom resources. Only after one pass of configuration and debugging can you run the project. Not to mention that configurations and tools are often different between multiple frameworks, which is really bad at sharing across frameworks. On the contrary, vite supports all common functions by default. Multi-framework only needs to introduce the plug-ins of the corresponding framework, and only need to study the plug-ins and configuration in depth when needed.

This article is reproduced from: https://blog.rxliuli.com/p/0987a1de82694970851755d02920bc6e/
This site is for inclusion only, and the copyright belongs to the original author.