Rspack 学习了解

一、简介

• Rspack GitHub 仓库、Rspack Quick start。

• Rspack 是由字节 ByteDance Web Infra 团队基于 Rust 语言开发的 Web 高性能构建工具。

• Rust 是种高效、可靠的通用高级语言。其高效不仅限于开发效率，执行效率也是令人称赞的，属于少有兼顾开发效率和执行效率的语言。

• Rspack 目前支持 React、Vue、Svelte、Solid、NestJS, Angular 初步支持，还缺失很多能力，其他还包括 Storybook、Modern.js、Modern.js Doc 等。

二、特点

• 优点

  • 启动速度：基于 Rust 实现，构建速度极快。

  • HMR(热更新)：内置增量编译机制，HMR 速度极快，完全胜任大型项目的开发。

  • 兼容 webpack 生态：针对 webpack 的架构和生态进行兼容，无需从头搭建生态。

  • 内置常见构建能力：对 TypeScript、JSX、CSS、CSS Modules、Sass 等提供开箱即用的支持。

  • 默认生产优化：默认内置多种优化策略，如 Tree Shaking、代码压缩 等等。

  • Build 性能：取得了 5~10 倍编译性能的提升。

  • …

• 缺点

  • Loader 支持有限， Plugin 目前主要靠内置，高级点的使用都比较麻烦或者支持有限，内置后配置都比较简单。

  • 更适合庞大的项目，这样运行速度、Build 速度都能保持在 webpack 的 5-10 倍，对中小项目提升有限。

  • 只支持 nodejs 14 以上的项目迁移。

  • …

三、性能对比

• 工具对比

  

• 字节内部项目迁移后的收益

  

四、架构设计

• 主要围绕 4 方面，附架构图

  

  • 核心架构脱胎于 Wabpack5

    因为 Wabpack 历经了多年的考验，它整体架构稳定性是非常高的。

  • 基于 Native 语言的高并发框架

    Rust 本身是一门 Native 语言，相比 JS 这种动态语言可以做非常高的优化，性能瓶颈更高，虽然 JS 语言在 V8 的一些优化上已经不错了，但是它的短板来自于对多线程的支持，且在实现多线程后所带来的收益远低于 Rust。

  • 基于 Rust 的 Babel 代替品 SWC

    Webpack 大部分的生态都是基于 Loader 跟 Plugin 扩展的，主要点在 Loader，传统的工具都是用 Babel Loader 去做的，但 Babel Loader 是比较慢的，所以 Rust 使用了 SWC 来代替，SWC 相比 Babel 带来的性能提升做了比较高的贡献，所以在开发 Rspack 时可以避免掉 Babel Loader 的使用。

  • 基于 NAPI-RS 的 Rust 和 JS 的高效通信

    核心用 Rust 写的，但是插件扩展是 JS写的，一方面有些开发者还得学习 Rust 才能做插件开发，上手成本比较高，另一方面是 JS 本身有个动态化特性，能直接在用户侧去编写并被加载执行，由于 Rust 是一门 Native 语言，做动态化是远不如 JS 的，即使使用 Rust 开发了一个插件，编译后的产物也是一个 Native Code，Native Code 跟 操作系统、CPU 等是强相关的，比如在 Windows 上编译出来的插件在 Mac 上是跑不起来的，如果想做这种 Native 插件的动态分发或加载是比较困难的，需要熟悉整套跨平台编程的知识，每一个插件可能需要编译出来很多个平台的产物，然后再分发到不同平台上去，这个门槛比较高且稳定性也不容易控制。

五、迁移原则

• 一条原则，优先使用内置能力，这样能保证性能最优化，比如不要使用 Babel Loader 相关的能力，常用的 Babel 能基本已经内置，如果一定需要使用，也需要将影响控制在很小范围内，如果大规模使用可能 Rspack 的性能就会下降比较明显。

• css 相关，webpack 一般是使用 style-loader、css-loader 做处理，但是 Rspack 使用 SWC 实现了 experiments.css，默认开启，所以建议使用内置 css 能力，而不是去使用这些 Loader。

• 资源模块推荐使用 Asset Modules 做处理，webpack5 也使用 Asset Modules 替换了之前的 file-loader、url-loader、raw-loader 等。

• html 生成也是内置了 Rust 版本的插件，但是功能可能会稍微弱一些，如果在 html 层面有比较高的定制需求，可以使用 @rspack/plugin-html，这是一个 JS 版本的，性能会比 Rust 版本慢一点，但是扩展更高。

QA

• Vite 与 Rspack 哪个更好？

  这个需要看场景，中小场景 Vite 开发体验与生态是更好的，比如有一些 SSR 的支持，Rspack 目前更适合重型应用（例如公司内部 庞大的B端应用），能编译提速 5-10 倍。

• 现阶段是否建议迁移 Rspack？

  这个需要看是否使用到了一些高级功能或者插件，现阶段可能还不支持，需要查看支持情况，讲人话就是没有对 webpack 进行比较深的定制或骚操作的话，应该问题不大，可以进行尝试。