揭秘！尤雨溪建立的VoidZero怎样改变前端天下

媒介

Vue和Vite之父尤雨溪公布建立公司 VoidZero，现在已经融资3200万。这篇文章欧阳将带你相识VoidZero是怎样改变javascript的天下！
到场欧阳的高质量vue源码交换群、欧阳平常写文章参考的多本vue源码电子书
痛点1: 工具太多，学不动

• 公司项目一样平常是多人维护，为了包管各人写出来的代码风格划一，以及在coding时就能发今世码错误，以是我们必要在项目中使用ESLint。
  
• 写代码时如果手动去调解代码格式，那也太累了。这时我们就必要一个主动化格式代码的工具，以是我们会在项目中使用Prettier。
  
• 我们在代码中使用了TypeScript，显着欣赏器是不认识TypeScript的，以是这时我们必要通过Babel将TypeScript转换为欣赏器认识的Javascript。
  
• 写完代码后我们必要使用单元测试对我们的代码举行测试，以是这时就必要引入测试工具Vitest大概jest。
  
• 测试完成后必要发布到生产环境，此时我们必要将代码打包，就必要使用Webpack大概Rollup打包工具。
  

从上面的流程可以看到我们的前端项目中引入了非常多的工具，而且这些工具都必要有各自的设置才华让我们的项目跑起来（实际上项目中使用到的工具比上面举例还要多）。
由于这些工具设置非常多，而且还特殊复杂，以至于都出现了一个特殊的岗位—— webpack设置工程师。
很多脚手架工具应运而生，此中的范例代表就是Vite。这些脚手架将这些工具的复杂设置封装在其内部，开发者只必要使用其暴袒露来的简化后的设置即可。
脚手架封装这些工具的计谋也很简单，使用胶水将这些工具粘贴起来。如果开发者有一些个性化需求时，还是不得不面临这些工具复杂的设置。
痛点2: 性能浪费，跑不快

这些工具根本都必要将源代码编译成AST抽象语法树，然后去遍历AST抽象语法树对源代码举行处理惩罚。
但是由于这些工具都是差别的人大概团队开发的，以是他们界说的AST抽象语法树格式多数雷同。AST抽象语法树在这些工具之间大多不能直接复用，以是必要重复天生AST抽象语法树。
比如在babel处理惩罚代码时天生一次AST抽象语法树，但是在eslint阶段时同样也天生了一次AST抽象语法树。
如果可以或许使用同一个AST抽象语法树，那么只必要初始化时将源代码编译成AST抽象语法树，后续在差别的阶段都可以直接复用了。
比如在将TypeScript转换成Javascript阶段时只必要递归遍历初始化时天生的AST抽象语法树，然后对这棵树举行处理惩罚。在eslint阶段同样是遍历初始化时天生的AST抽象语法树就可以了。
VoidZero是做什么的？

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快得多，这也就是快的第二个缘故原由。
总结

尤大创建的VoidZero公司的rolldown和Oxc这两个代价3200万的项目不光提供了打包功能，还提供了前端生态体系中所必要的全部工具。对于平凡开发者来说VoidZero的出现会让我们的Vite项目变得更加好用和快。如果VoidZero的规划图可以或许实现，VoidZero将会有一统前端工具链天下的趋势。
末了保举一下欧阳自己写的开源电子书vue3编译原理揭秘，看完这本书可以让你对vue编译的认知有质的提拔，而且这本书初、中级前端能看懂。完全免费，只求一个star。