个人中心
文章发布
退出
作者热门文章
- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框，下拉多选树，多级节点
- 【学习笔记】基础数据结构：猫树
57
4
Vue和Vite之父尤雨溪宣布成立公司 VoidZero，目前已经融资3200万。这篇文章欧阳将带你了解VoidZero是如何改变javascript的世界！ 。
关注公众号：【前端欧阳】，给自己一个进阶vue的机会 。
公司项目一般是多人维护，为了保证大家写出来的代码风格一致，以及在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快得多，这也就是快的第二个原因.
尤大创建的VoidZero公司的rolldown和Oxc这两个价值3200万的项目不光提供了打包功能，还提供了前端生态系统中所需要的所有工具。对于普通开发者来说VoidZero的出现会让我们的Vite项目变得更加好用和快。如果VoidZero的规划图能够实现，VoidZero将会有一统前端工具链天下的趋势.
关注公众号：【前端欧阳】，给自己一个进阶vue的机会 。
另外欧阳写了一本开源电子书vue3编译原理揭秘，看完这本书可以让你对vue编译的认知有质的提升。这本书初、中级前端能看懂，完全免费，只求一个star.
最后此篇关于揭秘！尤雨溪成立的VoidZero如何改变前端世界的文章就讲到这里了,如果你想了解更多关于揭秘！尤雨溪成立的VoidZero如何改变前端世界的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
57
4
0
1. HTML 结构 1.1 HTML 文件基本结构 第一个html程序 hello world! html 标签是整个 h
文件上传三种方案：1. form表单上传，2. iframe，3. FormData，base64上传文件，二进制流上传文件，二进制流下载文件。异步上传，大文件上传--切片：拆分上传请求断点续传显示上
1. HTML 结构 1.1 HTML 文件基本结构 第一个html程序 hello world! html 标签是整个 h
uniapp作为开发移动端的前端框架，目前国内是非常流行的，使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序，大大降低了移动开发的成本。网络
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附加至选择器末的
今天给大家分享一些实用的JS代码片段，有需要的朋友欢迎收藏! 1、获取浏览器的版 functiongetBrowser(){ varUserAgent=navigator.us
1 . Wappalyzer 全球用户数：1,000,000+ Wappalyzer可以帮助我们了解目标网站的构建方式。工作当中存在大量此类情况，客户需要我们参照某些网站
在管理后台中我们会使用大量的表格表单组件, 导入导出各种报表, 有些场景还需要对报表数据进行可视化分析, 动态生成可视化图表, 笔者将基于以上场景, 总结一些实用的 Table 组件开发技巧,
3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，c
QShop商城-快速开始-前端 工具准备 NodeJs 前端环境为NodeJs，下载地址：http://nodejs.cn/download/current/ 。 默认会用版
1. 初始JavaScript 1.1 什么是 JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行
1. WebAPI 背景知识 1.1 什么是 WebAPI JS 分成三个大的部分: ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI
1. WebAPI 背景知识 1.1 什么是 WebAPI JS 分成三个大的部分: ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI
1. 初始JavaScript 1.1 什么是 JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行
有没有办法从页面访问 tomcat 服务器日志？如果有一些方法或实现可以做到这一点...... 最佳答案 PSI Probe可以列出您的 Tomcat 日志文件并显示它们的内容。您可以采用相同的方法，
我想知道是否有一些很好的免费网站性能分析工具，特别是前端。这主要是关于Javascript的。 现有工具(例如 Google Pagespeed)的问题在于它不适用于我的应用程序。在进入我的应用程序之
我曾经遇到一个 MySQL 前端应用程序，它在父行中显示外部链接行，例如，如果 Client 表有一个指向 Suburb 表的外键: (来源:vb123.com) 您知道可以执行此操作的任何前端吗？
我正在建立一个带有管理区域的网上商店来管理产品。在管理区域中，所有产品都是可见的，但在网上商店中，只有数据库表中标记为 active = 1 的产品是可见的。 我正在使用 Silex 并将存储库注册为
有可能在 C# 中制作 GUI，但在 C 或 C++ 中制作实际程序。 比如说我想制作一个聊天应用程序。我希望界面在 C# 中。但我想用 C 编写所有实际代码。这可能吗？ 我找到了 http://ww
对于我自己的教育，我很好奇编译器使用哪个 C++ 前端和后端。您能告诉我以下技术在哪里使用以及它们有哪些标志/优势(如果有的话)？ Open64 - 它是后端、前端还是两者兼而有之？哪些编译器使用它？
我是一名优秀的程序员,十分优秀！