字节跳动 Rspack的原理与实践

1. 字节跳动 Rspack的原理与实践字节跳动杨健

2. 目录 1. Why Rspack 2. 特性 3. 生态兼容性 4. 开箱即用的能力 5. 业务性能收益 6. 架构设计 7. 迁移指南

3. Why Rspack?

4. 业务背景 • 公司内有相当多的巨型应用 • 冷启动时间 2-5 分钟，甚至更久 • 构建时间 15-30 分钟，甚至更久

5. 技术背景 • 社区上的确有一些性能优化的解决方案 • 然而，这些解决方案的切入点比较单一，并没有解决根本问题

6. 开发者们的诉求 • 迁移成本：迁移成本最小化 • 性能：冷启动要快，构建也要快 • 灵活性：构建工具的配置要足够灵活，能应对各种使用场景 • 生产环境产物性能：Code Splitting Treeshaking 影响产物执行性能 • 丰富的应用场景: Webapp、NodeJS、跨端应用

7. 特性

8. 特性 • ? 基于 Rust 实现，构建速度极快 • ⚡ 内置增量编译机制，HMR 速度极快 • ? 针对 webpack 的架构和生态进行兼容，无需从头搭建你的生态 • ? 提供 TS、TSX、JSX、CSS、CSS Modules 等开箱即用的支持 • ? 默认内置多种优化策略，如 Tree Shaking、Code Splitting、代码压缩等等

9. 生态兼容

10. 生态兼容 Plugin • • • • • • • • • • webpack-bundle-analyzer（内置） mini-css-extract-plugin（内置） terser-webpack-plugin（内置） react-refresh-webpack-plugin（内置） html-webpack-plugin （内置） de ne-plugin（内置） copy-webpack-plugin （内置、部分兼容） progress-plugin（内置） webpack-stats-plugi

11. 开箱即用 TypeScript 是 Rspack 中的一等公⺠，我们提供了开箱即用的能力 Webpack Rspack 零配置，开箱即用 *避免使用 babel-loader、ts-loader 以获得最佳的构建时性能

12. 开箱即用 CSS、CSS Modules 是 Rspack 中的一等公⺠，我们提供了开箱即用的能力 Webpack Rspack 零配置，开箱即用 *你仍需要配置 less-loader、sass-loader 对非 CSS 的资源进行 transform

13. 开箱即用 Less 需要由 less-loader 进行转译，可以直接配合 Rspack 内置的 CSS 后处理逻辑 Webpack Rspack *转译后的 CSS 使用 Rspack 内置的 CSS、CSS Modules 后处理器完成处理

14. 性能收益

15.

16. 业务性能收益 *测试设备：Apple M1 Pro - 10Core - 32G

17. 架构设计

18. 架构设计 • 核心架构脱胎于 Webpack • 拥抱 Native 语言的高并发架构 • 基于 Rust 的 Babel 替代品 SW • 基于 NAPI-RS 的 Rust 和 JS 的高效通信

19. 架构设计

20. 迁移实践

21.

22. RoadMap • 兼容更多 Webpack 生态：Loader、Plugin、Node API 等 • 支持 Persistent Cache（持久化缓存） • 支持 Lazy Compilation（懒编译） • 更多生产环境优化策略 • 兼容 Module Federation

23.

24. Q&A