Rspack 团队和模块联邦作者线下会谈,都聊了什么 👀

avatar
前端 @字节跳动 Web Infra

前言

Rspack 团队与模块联邦作者 Zack Jackson 在 2024 年 7 月在线下举行了一次头脑风暴会议,我们讨论了当下一些关键问题的解决方案,畅想了 Rspack 以及生态未来的发展方向。

这篇文档总结了会议中讨论的一些关键问题,以便于 Rspack 的贡献者和使用者了解 Rspack 未来的 Roadmap。

Rspack 技术栈

我们已经基于 Rspack 开发了一系列高性能工具,包括 RsbuildRspressRsdoctor、Rslib(即将开源) 和 Rspeedy(即将开源)。

在本次会议上,我们通过投票决定,使用 "Rstack" 来统称基于 Rspack 的这一系列工具(过去我们曾称它们为 Rsfamily),"Rstack" 是 "Rs" 和 "Stack" 的组合,代表以 Rspack 为核心的一整套技术栈。

Rspack 2.0 和 webpack 的关系

Rspack 1.0 是对标 webpack v5 设计的,这帮助了大量使用 webpack 的项目平滑地迁移到 Rspack。但这是一个双刃剑,对 webpack 的兼容限制了 Rspack 的设计,使 Rspack 无法在 API、架构、产物格式、构建性能等方面达到最优解。

在 Rspack 未来的大版本中,将逐步引入一些对 webpack v5 的 breaking change(Rspack 2.0 将是我们心中的 webpack v6 应有的样子)。这有助于 Rspack 改进 API 设计,进一步提升构建性能,并实现更多强大的新特性。

此外,我们将进一步完善 Rsbuild,通过 Rsbuild 来提供更现代的 API 和配置,降低用户和插件开发者的上手成本。

Rspack 2.0 计划于 Rspack 1.0 发布之后的 12~18 个月左右推出。

基于 TypeScript 的代码优化

Rspack 将探索基于 TypeScript 静态分析的产物体积优化方案,将 TypeScript 作为 Rspack 的一等公民,实现诸如 private field 移除、class properties mangle 等优化技术,从而进一步减小 Rspack 构建产物的体积。

可移植的持久化缓存

Rspack 将在 webpack persistent cache 的基础上,进一步实现 portable persistent cache,这意味着 Rspack 的构建缓存不仅是持久化的,同时也可以被移植到任何不同的环境和机器,这将帮助大型项目和团队更好地利用缓存,并为分布式构建奠定基础。

稳定的 lazy compilation

当前 Rspack 实现了实验性的 lazy compilation,能够延迟编译未使用的 entry 和 dynamic modules。目前的版本是对标 webpack 实现的,功能仍然不够成熟。

我们预测由 JavaScript 编写的编译工具依然会被广泛使用,包括 Babel(以及 React Compiler)、PostCSS、Less、Vue Compiler 等。因此,Rspack 需要提供更成熟的 lazy compilation 技术,以避免基于 JavaScript 的编译工具导致的 dev startup 性能劣化,使大型 web 应用可以更快地启动。

内置 CSS 支持

Rspack 已经对 webpack 的 experiments.css 进行了许多改进,使它可以稳定用于绝大部分场景。为了保持对 webpack v5 默认行为的兼容,Rspack v1 的 experiments.css 默认值依旧为 false。

Rspack 2.0 将默认开启 experiments.css,进一步改进其可用性,并移除 experiments 标记,这意味着 CSS 将成为 Rspack 默认的一等公民。此外,未来 HTML 也可能成为 Rspack 的一等公民。

Rust 插件

Rspack 目前对 webpack 的 JavaScript 插件提供了良好的支持,同时 Rspack 内部也有一套提供对等 hooks 的 Rust 插件系统,并且 Rust 插件的性能显著优于 JavaScript 插件。Rspack 将在未来提供自定义 Rust 插件的机制,潜在的方案包括:直接调用 Rspack Rust API 进行源码集成、Wasm 插件(类似 SWC 的 Wasm 插件)以及动态链接库。

Rust 化和 Rust API

目前 Rspack core 中依然包含了一些 TypeScript 模块和依赖(比如 watchpack 和 browserslsit)。在 Rspack 1.0 发布后,我们将进一步将 Rspack Rust 化,将更多 TypeScript 模块重写为 Rust 以提升性能。

这也有助于对齐 Rspack Rust API 和 JavaScript API 的一致性,Rspack 将以此为基础,为用户提供稳定、丰富的 Rust API。

细粒度代码拆分

目前 Rspack 进行代码拆分的最小单元是 module。未来 Rspack 将探索更细粒度的代码拆分,将 module 分成 statement 语句,并将 top level 的 statement 作为 coding splitting 的最小单位,这将有助于进一步减少产物体积。此外,Rspack 也可以将这些元信息提供给 minimizers,使 minimizers 可以更好地进行死代码消除。

结语

以上是本次 brainstorm meeting 中讨论的主要内容,我们认为其中每个话题都值得更深入的讨论和设计,如果你对其中的话题感兴趣,欢迎通过 GitHub Discussions、Discord 或其他方式与我们讨论。