Rspack 1.0 推出,秒了webpack 5

2,675 阅读10分钟

宣布推出 Rspack 1.0#

2024 年 8 月 28 日


我们很高兴推出 Rspack 1.0!

Rspack 是一个用 Rust 编写的下一代 JavaScript 捆绑器,兼容 webpack API 和生态系统,并且比 webpack 快 10 倍。

十八个月前,我们开源了 Rspack 0.1 版本,并收到了来自社区的大量反馈和贡献。在此期间,共有 170 位贡献者参与了 Rspack 的开发,提交了超过 5000 个 Pull Request 和 2000 多个 Issue,帮助 Rspack 发布了 80 多个版本。Rspack 在 npm 上的每周下载量已超过 10 万次 🎉。

Rspack 统计

今天,Rspack 已达到一个新的里程碑 - 1.0。这意味着 Rspack 已准备好投入生产,涵盖了大多数 webpack 的 API 和功能,并且现在可以支持更多用户了。

谁在使用 Rspack#

自 Rspack 开源以来,已经有不少企业和开发者在生产中使用 Rspack,Rspack 的每周 npm 下载量也突破了 10 万次。

Rspack 下载

在字节跳动内部,Rspack 的周下载量超过 40 万次,超过 1000 个 Web 应用使用 Rspack,包括 TikTok、抖音、Lark、Coze 等。这些项目通过使用 Rspack 显著提升了构建时间和迭代效率。这也帮助我们发现了 Rspack 的一些早期设计问题,促使我们改进架构,在迁移成本、性能和灵活性之间找到平衡。

我们也看到越来越多的企业用户开始使用 Rspack,包括微软、亚马逊、阿里巴巴、Intuit、Bit.dev、Discord 等。我们很高兴 Rspack 能够帮助这些企业用户实现渐进式迁移,也期待未来能与更多企业和开发者有进一步的合作与交流。

谁在使用

新功能#

自 0.1 版本发布以来,Rspack 引入了许多重要功能和优化,包括:

更好的性能#

作为一款基于 Rust 的打包工具,性能一直是 Rspack 的核心关注点。自 Rspack 0.1 发布以来,我们进行了多项性能改进,针对不同场景优化了其性能,并添加了惰性编译等关键功能,以确保在大型项目中获得更好的性能。

以下是基准测试中 Rspack 0.1 和 Rspack 1.0 的构建性能比较。Rspack 显著提高了构建性能,同时还添加了许多新功能:

Rspack 基准

需要注意的是,Rspack 目前的架构和实现还有很大的优化空间,在 1.0 版本发布后,我们计划将性能再提升几倍,以更好地支持大规模应用。

更好的兼容性#

0.1 版本刚发布时,Rspack 尚未实现许多 webpack API 和钩子,这限制了它与 webpack 插件和加载器的兼容性。这要求我们 fork 一些社区库以使其适用于 Rspack,例如早期版本的@rspack/plugin-html@rspack/plugin-minify@rspack/plugin-node-polyfill

随着 API 支持逐渐完善,Rspack 也加入了对越来越多 webpack 插件和加载器的支持,目前 Rspack 几乎兼容社区中所有的加载器,下载次数最多的 50 个webpack 插件中,超过 80% 都可以在 Rspack 中使用或者有替代。

在此基础上,Rspack 支持更多库和框架,包括 React、Preact、Vue、Solid、Svelte 和 NestJS。我们还要感谢许多社区插件的维护者,他们积极地将自己的工作成果用于 Rspack,例如unpluginnode-polyfill-webpack-plugin。特别感谢webpack 的主要维护者之一Alexander Akait,他帮助我们支持了许多 webpack 加载器和插件。

我们也希望支持和​​创建更多的社区插件,以进一步丰富 webpack 和 Rspack 生态系统。

更小的捆绑尺寸#

Rspack 始终将最小化生产构建的包大小作为首要任务。自 0.1 版发布以来,Rspack 已逐步将其优化功能与 webpack 保持一致,实现了拆分块树摇作用域提升mangle 导出等功能。

当项目从 webpack 迁移到 Rspack 时,这些功能可确保打包大小与 webpack 保持一致,同时改善 DX。在某些情况下,Rspack 的输出大小甚至略胜于 webpack。

例如,在实际的中型 Web 应用中,Rspack 1.0 的 bundle size 相较于 Rspack 0.1 从 6600KB 优化到了 5900KB,与 webpack 相当。未来,Rspack 还将继续探索更多高级的 bundle size 优化方案。

支持模块联合 2.0#

Module Federation是生态系统中广泛使用的微前端架构模式。Rspack 团队一直在与 Module Federation 团队合作开发 Module Federation 2.0。此新版本提供了动态 TS 类型提示、Chrome devtools、运行时插件、预加载等功能。这些功能使 Module Federation 更适合用作大型 Web 应用程序中的微前端架构。

Rspack 还提供向后兼容和对 Module Federation 1.0 的支持,使 webpack 项目更容易迁移。

稳定的 API 和新网站#

在 1.0 中,我们提高了配置、JavaScript API 和插件 API 的稳定性。这确保了更高级别的工具和框架可以更轻松地与 Rspack 集成。我们还改进了官方网站上的指南和 API 文档。

Rspack 1.0 还包含一个全新的主页。非常感谢设计师 Emily Jackson 和团队成员Zack Jackson为实现这一目标所做的努力。

Rspack 主页

为什么选择 Rspack#

在过去的两年中,社区中诞生了多个基于 Rust 的打包工具,它们都展现出了卓越的性能。Rspack 不仅提供了一流的性能,在灵活性和兼容性方面也领先于社区。

Rspack 目前的目标是:

  • 帮助现有的webpack项目逐步迁移到高性能的打包器,使得构建性能不再成为快速迭代的瓶颈。
  • Rspack 不仅适用于我们熟悉的浏览器和 Node.js 等环境,其目标是覆盖所有运行 JavaScript 的环境。这意味着 Rspack 可以轻松支持 Deno、Electron、跨平台应用程序、MiniApp 和任何其他 JavaScript 运行时。
  • 我们发现,在单一工具中平衡“灵活性”和“开箱即用”是一项艰巨的任务。因此,在开源 Rspack 之后,我们开发了一套 Rstack 工具链,包括 Rsbuild、Rspress、Rsdoctor 和 Rslib 等项目,每个项目都针对不同的用例。例如,为了降低配置 Rspack 的复杂性和高门槛,我们提供了 Rsbuild 以获得开箱即用的开发体验。

Rspack 堆栈#

Rspack 堆栈

Rstack 是“Rspack Stack”的缩写,代表围绕 Rspack 构建的技术堆栈。它由以下工具组成:

  • Rspack:专注于实现高性能的打包器,平衡性能和灵活的配置。
  • Rsbuild:专注于构建Web应用程序,提供开箱即用的开发体验。
  • Rslib:专注于构建库,提供高质量的 ESM 和 CJS 输出。
  • Rspress专注于生成静态站点并支持 MDX 来构建文档站点和博客。
  • Rsdoctor专注于构建分析,帮助开发人员解决与构建相关的问题。

这些工具共同构成了 Rstack。我们的目标是提供一套统一的 Web 开发工具,为开发人员和用户提供一流的体验。

与 webpack 的兼容性#

Rspack 1.0 的设计与 webpack v5 兼容,这将帮助许多使用 webpack 的项目顺利迁移到 Rspack。在保持与 webpack 兼容性的同时,Rspack 1.0 还拥抱了现代 Web 标准,并致力于实现极致的构建性能。

  • 对于 Web 标准,Rspack 积极关注现代 Web 标准的演变以及 TC39 和 Web 标准的最新发展。例如,Rspack 已经通过new Worker()支持使用 Web Workers,通过Import Attributes支持导入 JSON 模块,并支持根据CSS Module Scripts规范导入 CSS。
  • 为了性能,我们在 1.0 中引入了很多优化。例如,如果不使用 JavaScript 端的钩子,Rust 端将不会调用与 JavaScript 端的通信。此外,Rspack 对许多消息对象执行了延迟加载。即使消息对象很大,如果 JavaScript 只使用其属性的子集,Rspack 也只会传输已使用的数据,从而最大限度地减少 Rust 和 JavaScript 之间的通信开销。并且 Rspack 计划在未来提供更轻量级的钩子,以实现 Rust 和 JavaScript 之间更高效的通信。

在未来的主要版本中,Rspack 将基于 webpack API 进行演进,以更好地满足现代 Web 开发的需求。

如何使用 1.0#

如果您正在使用 Rspack 0.7 或更早版本,请注意 1.0 包含一些重大更改。我们准备了详细的文档来帮助您升级。请参考:从 Rspack 0.x 迁移

如果您以前从未使用过 Rspack,请参阅快速入门以开始使用 Rspack。此外,请随意给Rspack GitHub 存储库打个星 🌟 。

下一步#

Rspack 1.0 标志着一个新的开始。在此版本发布后,Rspack 团队将专注于以下目标:

  • 开发 Rspack 1.x。Rspack 1.x 将在 12 到 18 个月内进行迭代,带来更多新功能和改进。
  • 发布 Rsbuild 1.0。 基于 Rspack 1.0,支持多环境构建。目前 Rsbuild 已经发布 1.0 RC 版本,预计 9 月份正式发布。
  • 发布 Rsdoctor 1.0。 此版本将改进对 Vue 的支持并为 CI/CD提供报告格式。
  • 开发 Rslib 0.x。Rslib是一个基于 Rsbuild 的库构建工具。有关更多详细信息,请参阅Rslib 存储库。
  • 开发 Rspress 2.0。 它将基于 React 19,并将改进一些 API 设计。有关更多详细信息,请参阅Rspress v2.0 规划。

以下是我们计划在 Rspack 1.x 中支持的一些主要功能:

更快的 HMR#

目前 Rspack 已经可以满足大部分项目的性能要求,但仍有很大的性能优化空间。在开发过程中,Rspack 在 make 阶段已经实现了接近常数级别的增量构建。但在 seal 阶段,随着项目的规模扩大,部分计算仍然会变慢。Rspack 会逐步优化 seal 阶段的计算,使 HMR 时间保持在一个常数级别。

便携式缓存#

Rspack 缓存能力的演进路径是依次实现内存缓存、持久化缓存、可移植缓存,目前 Rspack 已经实现了内存缓存,并且提供了非常优秀的 HMR 性能,下一步计划在此基础上实现持久化缓存,以解决大型项目冷启动时间过长的问题,并在功能上与 webpack 保持一致。

此后,我们计划继续实现可移植缓存。这意味着 Rspack 的构建缓存不仅是持久的,而且可以跨环境和机器移植。这将帮助团队更好地利用缓存,并为分布式构建奠定基础。

基于 TypeScript 的优化#

目前,Rspack 在处理 TypeScript 模块时,会先通过加载器将其转换为 JavaScript,然后再进行进一步处理。这提供了灵活性,但也阻碍了对构建输出的进一步优化。例如,开发人员需要使用enum而不是const enum,但enum很难将其优化为常量。未来,我们计划将 TypeScript 视为 Rspack 中的一等公民,利用 TypeScript 的静态信息为构建输出提供更高级的编译时优化(例如基于类型的属性重命名)。

稳定的 Rust API#

目前,上层工具可以使用 JS API 集成 Rspack,这提供了良好的可扩展性。但是,Rust 和 JavaScript 之间的通信开销限制了 Rspack 的性能。我们还提供了SWC Wasm 插件来支持扩展,但其性能仍然比原生语言慢。为了给上层工具提供更灵活的集成选项和更好的性能,我们计划公开 Rspack 的 Rust API 以供集成。

React 服务器组件支持#

在字节跳动,我们已经基于 Rspack 试验性地支持了 RSC(React Server Components),并在一个大型 Web 应用程序中进行了验证。未来,Rspack 将为 RSC 提供一流的支持,并提供更多核心功能,使 RSC 更易于实现。例如,Rspack 现在支持功能,允许在一次运行中为多个环境构建。

改进的 ESM 输出#

ESM 是 JavaScript 模块的标准。我们目前正在改进 Rspack 和 webpack 对 ESM 输出的支持,并基于 Rspack 创建一个名为 Rslib 的库构建工具。这将使开发人员在构建 npm 包时更好地利用 ESM 的静态分析和 tree-shaking。