揭秘!尤雨溪成立的VoidZero如何改变前端世界

news/2024/10/9 13:12:48

前言

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

关注公众号:【前端欧阳】,给自己一个进阶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的规划图:
future

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

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

kuai

好用体现在Vite不再依赖于EsbuildRollup了,而是只使用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(格式化代码)等。

oxc

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

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

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

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

总结

尤大创建的VoidZero公司的rolldown和Oxc这两个价值3200万的项目不光提供了打包功能,还提供了前端生态系统中所需要的所有工具。对于普通开发者来说VoidZero的出现会让我们的Vite项目变得更加好用。如果VoidZero的规划图能够实现,VoidZero将会有一统前端工具链天下的趋势。

关注公众号:【前端欧阳】,给自己一个进阶vue的机会

另外欧阳写了一本开源电子书vue3编译原理揭秘,看完这本书可以让你对vue编译的认知有质的提升。这本书初、中级前端能看懂,完全免费,只求一个star。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/69356.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

20222314 2024-2025-1 《网络与系统攻防技术》实验一实验报告

网络攻防实验报告姓名:陈振烨学号:20222314实验日期:2024/09/29 — 2024/10/09实验名称:缓冲区溢出和shellcode 指导教师:王志强实验要求:1.掌握NOP, JNE, JE, JMP, CMP汇编指令的机器码(0.5分)2.掌握反汇编与十六进制编程器 (0.5分)3.能正确修改机器指令改变程序执行流…

最基本必会的增删改查

本文详细介绍了SQL中的四大基本操作:INSERT用于数据插入,DELETE用于数据删除,UPDATE用于更新数据,SELECT用于查询数据。文中还涵盖了WHERE条件查询,LIKE用于模糊查询,ORDERBY进行排序,LIMIT用于分页查询,以及聚合函数如COUNT(),SUM(),AVG()和MAX()。这些是数据库管理的…

macos安装gemini

macos运行步骤 1.下载gemini 2.给gemini权限sh-3.2# chmod +x gemini-darwin-amd64sh-3.2# ./gemini-darwin-amd64 这个时候需要在mac的隐私设置出进行允许 启动台--》系统偏好--》 再次sudo执行少侠,我看你气度不凡天赋异禀,骨骼精奇,这么帅,来了就帮推荐一把吧 我的最近更…

销售团队管理全面指南:从结构到流程

“除非卖出东西,否则就不能叫生意。” ——Thomas Watson的这段话表明,无论您经营哪个行业,销售都应该成为企业最重要的部分。您可能拥有出色的产品,但真正重要的是如何销售它。为此,您需要一支出色的销售团队,并让他们在一个良好的管理体系(流程体系)下发挥作用。 一、…

SonarQube的安装与使用

SonarQube的安装与使用一、说明: SonarQube 7.8以上只支持jdk 11版本并且不支持mysql数据库 本次安装为Windows环境 版本信息如下: 1、sonarqube — 7.7 2、Sonar-scanner-cli —4.5.0 3、Postgre —10.1二、解压附件中的sonarqube-7.7.zip,sonar-sca…

Sealos Devbox 发布,珍爱生命,远离 CI/CD

水滴攻击太阳系用的是最原始的攻击方式:撞击!却又如此有效率。 当我们搞了一堆容器、编排、CI/CD、DevOps,发明了一大堆没什么用的名词之后,最终发现这些操作都是花里胡哨,让开发者越陷越深。 最终你会发现一个真理:原来十年前、二十年前的线上直接改代码是效率最高的方式…

【日记】我不想调回去啊啊啊(341 字)

正文新电脑不知道为什么有时键盘会突然没反应。今天没有客户,工作上几乎没什么可说的。唯一听到的消息,似乎是我可能不久之后就要被调回去,因为市分行有人要人事调动。救命啊!我不想回市分行。在下面吃住都比市分行好,而且我买的舞蹈课还没上完呢,甚至只上到了一半多一节…

适用于海外业务的在线客服系统

我们系统的前端访客界面支持多语种展示 默认会根据浏览器语言进行自动切换URL聊天链接中传递参数,例如:lang=ja-JP 则界面就展示为日文 界面上的文案部分,是可以通过语种文件进行转换展示,但是内容部分是不会跟着变的所以,建议每一个语种建立一个商家。例如:英文客服,中…