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

前言

VueVite之父尤雨溪宣布成立公司 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的规划图:
future

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

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

好用体现在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将会有一统前端工具链天下的趋势。

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

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

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

相关文章

Library介绍(四)

标准单元描述 标准单元主要由以下几个部分构成,分别是引脚电容、power、timing组成。其中引脚电容主要包含input/output pin的电容值。 power主要包含每个pin的leakage power和internal power。 timing主要包括cell的input pin到output pin的rise delay和fall del…

Shuffle Net系列详解 (1) Shuffle Net论 V1论文理论部分详解

Shuffle Net 系列 论文精讲部分0.摘要1. 引文2. 相关工作3. Approach方法3.1 Channel Shuffle for Group Convolutions 通道重排针对分组卷积3.2 模型块Blocka Blockb Blockc Block 3.3 模型整体架构 4 实验5 总结 论文精讲部分 本专栏致力于深度剖析轻量级模型相关的学术论文…

浏览器书签的同步和备份工具Elysian

什么是 Elysian ? Elysian 是一个自托管工具,用于将您经常使用的书签从浏览器的书签工具栏备份到您的家庭实验室。包括服务和浏览器插件两部分。 Elysian 主要专注于将您浏览器的常用书签备份到您家庭实验室中运行的 Elysian 服务器。浏览器插件使用 chr…

利用1688商品数据洞察市场:优化策略,提升业绩

对1688商品通过API接口的数据进行详细分析,可以帮助商家更好地了解商品的市场表现、用户需求及行为,从而优化商品供应和销售策略。以下是对1688商品数据的详细分析,包括需要分析的具体数据、分析过程及结果、以及基于分析结果的建议。 一、需…

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

正文 新电脑不知道为什么有时键盘会突然没反应。 今天没有客户,工作上几乎没什么可说的。唯一听到的消息,似乎是我可能不久之后就要被调回去,因为市分行有人要人事调动。 救命啊!我不想回市分行。在下面吃住都比市分行好&#xff…

C语言之扫雷小游戏(完整代码版)

说起扫雷游戏,这应该是很多人童年的回忆吧,中小学电脑课最常玩的必有扫雷游戏,那么大家知道它是如何开发出来的吗,扫雷游戏背后的原理是什么呢?今天就让我们一探究竟! 扫雷游戏介绍 如下图,简…

鸿蒙开发之ArkUI 界面篇 二十四 计数器案例

计数器案例,点击’-‘按钮,数字减少1,点击啊‘’按钮,数字加一 分析:这里需要三个组件,外层容器是Row,从左往右的组件分别是ButtonTextButton,涉及到修改更新界面,变量需…

【PGCCC】在 Postgres 上构建图像搜索引擎

我最近看到的最有趣的电子商务功能之一是能够搜索与我手机上的图片相似的产品。例如,我可以拍一双鞋或其他产品的照片,然后搜索产品目录以查找类似商品。使用这样的功能可以是一个相当简单的项目,只要有合适的工具。如果我们可以将问题定义为…

点评项目-4-隐藏敏感信息、使用 redis 优化登录业务

一、隐藏敏感信息 之前我们对 /user/me 路径,直接返回了登录的所有用户信息,其中的 passward 等敏感信息也会被返回到前端,这是很危险的,故我们需要选择性的返回用户信息,隐藏敏感用户信息 我们可以创建一个 UserDTO…

Linux环境变量及命令行参数

目录 一、环境变量的概念和基本命令 二、环境变量的组织结构及获取环境变量的方式 (1)组织结构 (2)获取环境变量 命令行第三个参数 通过第三方变量environ获取 通过系统调用getenv获取 三、命令行参数 一、环境变量的概念和…

ORM框架简介

什么是ORM? ORM(Object-Relational Mapping,对象关系映射)是一种编程技术,用于在关系数据库和对象程序语言之间转换数据。ORM框架允许开发者以面向对象的方式来操作数据库,而不需要编写复杂的SQL语句。简单…

JS基础总结

JS基础总结 WebAPI获取元素事件事件源的位置操作元素元素节点元素属性BOM对象操作元素综合示例(键盘移动活动表格) 执行上下文和执行栈执行上下文执行上下文的特点执行上下文的生命周期执行栈 作用域var let const的区别作用域链作用域和值类型引用类型的…

Linux源码阅读笔记-USB驱动分析

基础层次详解 通用串行总线(USB)主要用于连接主机和外部设备(协调主机和设备之间的通讯),USB 设备不能主动向主机发送数据。USB 总线采用拓扑(树形),主机侧和设备侧的 USB 控制器&a…

SpringBoot框架在服装生产管理中的创新应用

3 系统分析 3.1 可行性分析 可行性分析是该平台系统进行投入开发的基础第一步,必须对其进行可行性分析才能够降低不必要的需要从而使资源合理利用,更具有性价比和降低成本,同时也是系统平台的成功的未雨绸缪的一步。 3.1.1 技术可行性 技术…

AtCoder Beginner Contest 374 A-E 题解

服了,跟 DP \text{DP} DP 杠上了,C 和 E 都在想 DP \text{DP} DP C 和 D 又交了两发罚时 每题难度: A:11 B:28 C:226 D:694 E:1504 F:2026 G:2608 A. Takahashi san 2 题意 给你一个字符串,判断这个字符串是否以 san 结尾&…

springboot医院预约挂号系统

基于springbootvue实现的医院预约挂号系统 (源码L文ppt)4-085 4.1系统功能模块设计 医院预约挂号系统与数据分析系统在设计与实施时,采取了模块性的设计理念,把相似的系统的功能整合到一个模组中,以增强内部的功能…

服装生产管理:SpringBoot框架的高效实现

3 系统分析 3.1 可行性分析 可行性分析是该平台系统进行投入开发的基础第一步,必须对其进行可行性分析才能够降低不必要的需要从而使资源合理利用,更具有性价比和降低成本,同时也是系统平台的成功的未雨绸缪的一步。 3.1.1 技术可行性 技术…

城市交通场景分割系统源码&数据集分享

城市交通场景分割系统源码&数据集分享 [yolov8-seg-C2f-Faster&yolov8-seg-GhostHGNetV2等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI Glob…

LLM RAG面试问题大全!

01 引言 RAG在通用人工智能、数据科学和人工智能的发展领域中起到了变革性的作用。RAG模型让机器能够基于事实产生更准确、连贯和一致的语言,它改变了人类与技术的互动方式。RAG让能够撰写独特内容、引人入胜的产品描述和新闻文章的机器人概念成为现实。尽管RAG的重…

打造梦幻AI开发环境:一步步解锁高效配置的魅力

作者简介:我是团团儿,是一名专注于云计算领域的专业创作者,感谢大家的关注 座右铭: 云端筑梦,数据为翼,探索无限可能,引领云计算新纪元 个人主页:团儿.-CSDN博客 目录 前言&#…