8

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

 1 year ago
source link: https://blog.rxliuli.com/p/0987a1de82694970851755d02920bc6e/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

自 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
  • react
  • preact
  • svelte

一些非官方的支持

  • solid.js

依赖于 vite 的有名工具

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

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

vitest

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

  • 支持 esm
  • 兼容 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，真香！

1665283372624.png

1665283372624.png

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK