尤雨溪 VoidZero 要做什么？目前 JS 工具链有哪些问题？

前端双越老师
6,856 阅读6分钟

大家好，我是双越老师，也是 wangEditor 作者。

今年我致力于开发一个 Node 全栈 AIGC 知识库 划水AI，包括 AI 写作、多人协同编辑。复杂业务，真实上线，大家可以去注册试用，围观项目研发过程。

尤雨溪 和 VoidZero

前段时间，Vue 和 Vite 作者尤雨溪宣布创办 VoidZero 公司，并得到几百万美元的投资。

VoidZero 将基于 Vite ，并开发 Rolldown 和 Oxc 两大工具，来统一前段 JS 工具链。解决碎片化、不兼容、低效率等问题。

VoidZero 主打一个“多快好省”，核心工具使用 Rust 语言开发，运行效率高，速度快。

目前 JS 工具链有哪些问题

JS 工具链主要包含 semantic analysis、transformer、linter、formatter、minifier、boundler 等流程。

这些类型的工具，我们现在是怎么用的？当前有哪些工具？它们之间又是什么关系呢？它们真的是低效率、碎片化吗？下面我们一一介绍。

注意，它们的关系有些混乱，有些既能编译又能打包，功能交叉比较多，所以不用强行分类对比。

JS runtime 运行时

所谓 runtime 运行时，就是一个语言的运行环境。如果没有 runtime 那么一个语言也只是一个字符串或者字符串文件，无法解析和运行。

  • Nodejs 是最常见的 JS runtime ，它稳定、成熟且生态系统非常丰富。
  • Deno 是近几年开发的 JS runtime，它主打 TS 支持和网络安全，前两年得到过 20M 美元投资,近期刚发布 Deno 2.0 ，目前发展比较迅猛
  • Bun JS runtime，主打性能和 All-in-one
// Nodejs Deno 或 Bun，都是写 JS 代码
const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
});

console.log(`Listening on localhost:${server.port}`);

PS. JS runtime 运行时不是 JS 工具链的一部分，它只是最基层的能力，但是了解这些工具和名词，有助于区分它们和 JS 工具链的区别。你可以没用过，但是你得知道它的存在，知道它是干什么的。

Parser/Compiler 解析器/编译器

Web 前端开发需要考虑各种浏览器兼容性，现代浏览器还无法直接运行 TS JSX 和最新的 ES 代码。

所以，我们需要把开发环境下的 TS JSX ES 等代码，转换为浏览器能执行的 JS 代码，一般是 ES5 。

image.png

Babel 是最早做这个工作的，使用 JS 开发，有丰富的生态和插件，早就融入 webpack rollup 等打包工具。

但 Babel 是 JS 开发的，运行效率比较低。而且 Babel 在编译 TS JSX 时需要手动做一些配置，比较麻烦。

SWC 是使用 Rust 语言开发的 JS 编译器，速度是 Babel 的 20-70 倍（不同 CPU），而且原生支持 TS 和 JSX 语法，旨在替代 Babel 。Vite 内部使用的就是 SWC 。

Rspack 是使用 Rust 语言开发的，但它不单单是一个 JS 编译器，它是一个综合性的打包工具，效率非常高。

和 Rspack 一样， esbulid 是使用 Go 语言开发的，页是一个综合性的打包工具，包含 JS 编译器，效率非常高。

image.png

Linter & Formatter 代码检查和格式化

这部分用的比较多的就是 eslint 和 prettier ，但也有使用上的困惑

  • eslint 配置标准比较多（如 Recommended Airbnb Google StandardJS 等），大家用的可能都不一致，不同项目也可能不一致
  • eslint 和 prettier 有一些功能重复，用起来有选择困难症，而且可能会重复配置

image.png

Minifier 代码压缩

最早使用 UglifyJS 来压缩 JS 代码，现在它的下载量也非常大。

terser 是基于 UglifyJS 源码开发的，支持 ES6 新语法，对 tree-shaking 也做了优化。

然而现在 SWC 和 esbulid 等新工具也都支持 JS 代码压缩，而且他们的执行效率更高。毕竟 Rust 或 Go 天生就执行效率高于 JS 很多。

Boundler 打包器

打包器是我们最常接触的，例如 Webpack Vite 和 Parcel ，后者可能不常用，但它也是老牌工具。

Vite 使用 SWC 作为解释器，效率高。在开发环境使用 esbulid 打包，而在生产环境下使用 rollup 打包。

同时，esbulid （使用 Go 语言开发，上文有介绍）和 rollup 他们也都可以单独作为打包工具使用，很多 JS 第三方插件就是用 rollup 打包的。

Turbopack 是 Vercel 公司使用 Rust 开发 JS 打包工具，用于 Next.js 项目，也可以独立使用。

Rspack 是使用 Rust 开发的 JS 打包工具（同时也有 JS 编译器），可以替代 webpack 而且速度非常快。

image.png

SWC 也在开发自己的打包工具 swcpack —— 这么多，你说乱不乱？是不是碎片化？

image.png

为何用 Rust

看到现在你可能好奇，为何那么多工具都要使用 Rust 语言开发呢？主要有两点

  • Rust 是编译型语言，它可以编译为原生代码 native code 直接运行，媲美 C++ 的性能
  • Rust 内存管理更安全，而 C++ 内存管理更易出 bug

最后

再回头看 JS 工具链的三个问题

  • 碎片化：这个太明显了，各个领域都有大量的重复的工具，尤其打包器
  • 不兼容：老旧工具对新语法，尤其 TS JSX 的兼容性，以及需要过多的配置
  • 低效率：这个也很明显，在工具领域 JS 明显干不过 Rust ，出局是迟早的事情 （不要慌：这只是工具领域，应用领域依然是 JS 和 TS）

所以，Vue 作者尤雨溪眼光毒辣，看的很准确，能直指问题，而且这部分他有极强的优势和抓手，就是 Vite 。现在 Vite 有大量的用户，可以很好的作为切入点。

当 Vue 等 Web 框架，以及 vite 等单一工具，它们发展遇到瓶颈时，尤雨溪可以跳出这个圈，发现更高层次的问题，并且能落地执行，这一点是非常值得我们学习的。

就像当你在前端领域发展遇到瓶颈时，应该往 node 全栈或新的领域（如 AI）去转变，有兴趣可以关注我的 划水AI 项目，肯定可以帮到你。

最后，VoidZero 得到这么多投资，投资就需要回报，它以后如何商业化呢？不可能对 vite 直接收费，那如何挣钱呢？

关注我，下一节我会详细分析。这将比技术和代码更有价值。

avatar
文章
阅读
粉丝