尤雨溪成立的 VoidZero，如何改变前端世界

前端从进阶到入院 · 公众号 · · 2024-10-11 08:00

正文

前言

Vue 和 Vite 之父尤雨溪宣布成立公司 VoidZero，目前已经融资 3200 万。这篇文章欧阳将带你了解VoidZero是如何改变javascript的世界！

公司项目一般是多人维护，为了保证大家写出来的代码风格一致，以及在coding时就能发现代码错误，所以我们需要在项目中使用 ESLint 。
写代码时如果手动去调整代码格式，那也太累了。这时我们就需要一个自动化格式代码的工具，所以我们会在项目中使用 Prettier 。
我们在代码中使用了TypeScript，明显浏览器是不认识TypeScript的，所以这时我们需要通过 Babel 将TypeScript转换为浏览器认识的Javascript。
写完代码后我们需要使用单元测试对我们的代码进行测试，所以这时就需要引入测试工具 Vitest 或者 jest 。
测试完成后需要发布到生产环境，此时我们需要将代码打包，就需要使用 Webpack 或者 Rollup 打包工具。

从上面的流程可以看到我们的前端项目中引入了非常多的工具，并且这些工具都需要有各自的配置才能让我们的项目跑起来（实际上项目中使用到的工具比上面举例还要多）。因为这些工具配置非常多，而且还特别复杂，以至于都出现了一个特殊的岗位—— webpack配置工程师 。

很多脚手架工具应运而生，其中的典型代表就是 Vite 。这些脚手架将这些工具的复杂配置封装在其内部，开发者只需要使用其暴露出来的简化后的配置即可。

脚手架封装这些工具的策略也很简单，使用胶水将这些工具粘贴起来。如果开发者有一些个性化需求时，还是不得不面对这些工具复杂的配置。

这些工具基本都需要将源代码编译成 AST抽象语法树 ，然后去遍历 AST抽象语法树 对源代码进行处理。

但是由于这些工具都是不同的人或者团队开发的，所以他们定义的 AST抽象语法树 格式大都相同。 AST抽象语法树 在这些工具之间大多不能直接复用，所以需要重复生成 AST抽象语法树 。

比如在babel处理代码时生成一次 AST抽象语法树 ，但是在eslint阶段时同样也生成了一次 AST抽象语法树 。

如果能够使用同一个 AST抽象语法树 ，那么只需要初始化时将源代码编译成 AST抽象语法树 ，后续在不同的阶段都可以直接复用了。

比如在将TypeScript转换成Javascript阶段时只需要递归遍历初始化时生成的 AST抽象语法树 ，然后对这棵树进行处理。在eslint阶段同样是遍历初始化时生成的 AST抽象语法树 就可以了。

VoidZero公司的出现就是为了从根源解决上面的这两个javascript工具链的痛点，而不是简单的使用胶水将这些工具粘贴起来。

VoidZero公司下面主要包含两个项目：Rolldown 和Oxc，就这两个项目就值 3200万 。

VoidZero的官网介绍是：

我们的使命是让 Web 开发人员比以往更加高效。

说人话就是有了VoidZero后，开发人员以后使用Vite将会变得更加 好用 和 快 。

下面这个是VoidZero的规划图：

这个规划图对于普通开发者来说有什么影响呢？

对于普通开发者来说仍然还是使用Vite，单元测试依然还是Vitest，并没有增加额外的心智负担。但是却比以前变得更加 好用 和 快 ，接下来我将给你解释为什么会变得更加 好用 和 快 。

好用 体现在Vite不再依赖于 Esbuild 和 Rollup 了，而是只使用 Rolldown 就可以了，降低了开发者的心智负担。并且 Rolldown 还完全兼容 Rollup 以前的API，无需担心使用 Rolldown 后项目不兼容的问题。

Rolldown 其实就是一个使用Rust开发的类似于 Rollup 的打包工具，专门设计给Vite使用的。因为是使用Rust开发的，所以他的速度超级快。

一个普通的前端项目无非就那么几个阶段：

首先是 parser阶段 ，在这个阶段会根据源代码生成AST抽象语法树。
接着就是 transform转换阶段 ，在这个阶段会去遍历 parser阶段 生成的AST抽象语法树将源代码转换成我们想要的样子。
很多前端工具都是在这一阶段去实现的，比如babel、typescript、jsx等。但是这些工具大多都各自为政，生成的AST抽象语法树可能都不同。所以会导致会不断的进行 parser阶段 去生成AST抽象语法树，从而导致性能浪费和速度变慢。
转换阶段完成后就是 打包阶段 ，在这个阶段会生成最终的打包后的文件。在这些阶段中会涉及到很多前端工具，但是这些工具都是不同的人开发的，用起来心智负担也很大。而 Rolldown 却可以提供这些阶段的所有功能，包括 parser解析 、 transform转换 、 bundle打包 等。之所以 Rolldown 这么牛逼，主要还是他底层依赖于 Oxc。Oxc提供了一系列的JavaScript 工具，比如 Parser （生成AST抽象语法树）、 Linter （对标 ESLint ）、 Transformer （将TypeScript、JSX转换为javascript）、 Minifier （压缩代码）、 Formatter （格式化代码）等。

从VoidZero的规划图中来看 Oxc将会提供我们所需的前端工具中的所有功能，并且都是使用rust去实现的（只能说牛逼！！）。

而 Rolldown 所扮演的角色是将 Oxc提供的这些工具整合起来，然后提供给Vite去使用。对于开发者来说无需去了解那么多工具的配置，只需要去搞清楚Vite的配置即可，大大减少了开发者的心智负担。

并且由于这些工具都是由 Oxc提供的，都是一套AST抽象语法树，所以这些工具都能复用AST抽象语法树，无需去生成多次，这就是 快 的第一个原因。

不管是 Rolldown 还是 Oxc他们都是使用rust开发的，速度当然比js快得多，这也就是 快 的第二个原因。