Rust 如何引领前端基建新潮流以及字节跳动的应用

1. Rust 与前端工程化 Rust 在前端工程化领域内的发展以及字节跳动的实践

2.

3. 目录 1. Rust 在前端行业的发展 2. 字节跳动的实践 3. Rust 中等复杂系统的设计

4. ByteDance Web Infra Team 负责 Rspack / Rsbuild / Modern.js 等开源项目为字节内 5000+ 前端研发提供基础设施工程化、研发框架、微前端解决方案、AI etc 欢迎关注我们 https://github.com/web-infra-dev

5. 张磊字节跳动 Web Infra 前端负责人我们还招架构师，有兴趣可以联系我 @zoolsher 分享内容包含利益相关部分

6. Rust 的发展

7. Rust 的发展 ...在生产环境中有些应用经常需要 20 ～ 30 分钟的构建时间... 一个项目怎么可能构建 30 分钟？什么项目会有 5w 个模块？用 Rust 构建前端项目是不是空气炮打蚊子？把工程重构一下就行了，完全不用搞这么复杂的东西工程怎么做的这么差？我从来没做过构建超过 10 分钟的项目？从来没见过这么大的项目微前端不能解决问题么？

8. Rust 的发展 Discord 项目 Kibana 项目 499.9w 行 TS 代码; 迭代 11 Years; 构建超过 60mins; 5w+ TS 文件; 接入 Rspack 前 11 mins 构建时长社区项目 ... big legacy frontend monolith project... almost 1 hour...

9. Rust 的发展前端生态逐渐成熟 Template literal Class for of async TypeScrip t Optional chain ESM Promise Static block Spread 2012 Symbol Arrow Private TLA ShadowReal m 2020

10. HTM L Rust 的发展 TS JS Vue Transforme r Forge t Soli d Next.j s Modern. js JSX TSX ng Remi x 语言编译器 SWC Svelt e CSS 稳定且标准的组件正在慢慢的原生化 IcePack Framework etc Bundler Parcel Rspac k Rolldow n esbuild

11. Rust 的发展 Node.js 1. 多线程 Node.js? Rust! Rust 1. 工具链完善 2. 生态丰富 3. 无畏并发 4. wasm 友好 2. 语言性能 3. GC cargo 37 个命令 Fearless 包还算多 JavaScript 1856 个 Rust Analyzer Biome Playground

12. Rust 的发展

13. esbuild 字节跳动的实践 ✅ Rspack all in rust ❌ 跨端插件少，定制性功能少 Web 生态插件多，业务自定义插件多跨端场景不太需要 HMR 支持 Web 场景内 HMR 有限，但 esbuild 支持不好跨端场景就一个 bundle Web 场景小 chunk 引起性能劣化白色的图标是 Lynx ，是一个类似 RN 的跨端框架

14. esbuild 字节跳动的实践 Rspack all in rust 一些质疑的声音：工具的使用者和工具的开发者应该使用同一门编程语言？ JS 本身并不慢，工具的性能并不是由语言决定的，只要设计好合理的架构就能发挥出性能？社区没有能解决我们问题的我们决定自己做一个 Webpack 慢不是慢在 Webpack ，而是慢在插件上，所以做 Rspack 没有意义？

15. esbuild 字节跳动的实践文档站 Monorepo 微前端中后台移动端组件库 Rspack 小程序 all in rust 跨端场景把控力强的场景 All Rust Tool

16. 字节跳动的收获 Workflow 优化性能收益很多业务取得了 10 倍的性能收益 CI CD 构建时间下降本地 Dev HMR 时间缩短基于 Rspack 的 CI 流程，将一切检查左移

17. 字节跳动遇到的挑战 Rust 工具使用者调试困难 rsdoctor.dev for more 源码分发变成了二进制产物分发，为了避免答疑黑洞，方便开发者理解系统，准备调试工具，将 Rust 内部架构白盒化

18. 字节跳动遇到的挑战业内实践向上层框架集成方案的取舍优点缺点 NAPI RPC 源码集成 WASM 集成 Rspack esbuild / Turbopack IcePack SWC 性能相比 RPC 好调试友好兼容性友好性能最佳支持动态化、性能还不错不支持动态化 ABI 兼容问题 1. 执行环境依赖 NAPI 复杂的结构化数据难传递 2. NAPI unsafe

19. 中等复杂系统设计

20. 中等复杂系统设计这部分开始需要你了解一些基础的 Rust 知识所有权、生命周期、引用借用、内部可变性等

21. 中等复杂系统设计 RuleSet Module Compiler Module Factory Compilation Chunk Resolver Dependency Parser Webpack 复杂的对象之海

22. 中等复杂系统设计多引用方案一：通过引用的方式实现问题 1. 代码维护 lifetime 地狱生命周期标记问题 2. 多线程支持 lightning css

23. 中等复杂系统设计方案二：智能指针多引用问题：可变性问题，Rc 不可以 Mut Rc / Arc 内部通过 unsafe 跳过检查 Biome

24. 多引用 + Mut 中等复杂系统设计方案三：智能指针 + RefCell 问题：成环后会引起内存泄漏 RefCell 引入了内部可变性 unsafe Yew

25. Rust 中循环引用的实现中等复杂系统设计 � 方案四：unsafe + ptr

26. 中等复杂系统设计问题：删除不友好 C B D A Id1 Id2 Id3 Id4 Id5 Id6 Id7 Nod e Nod e Nod e Nod e Nod e Nod e Nod e Node Arena Rust Analyzer Code

27. 中等复杂系统设计 C B 1. 业内非常多的人在用，如 Rust Analyzer / Rspack 等 D A 2. 性能友好 Bump Allocation Id1 Id2 Id3 Id4 Id5 Id6 Id7 Nod e Nod e Nod e Nod e Nod e Nod e Nod e Node Arena 3. 缓存友好，可以基于这套架构做可序列化的缓存

28. 最后 1. 作为个人，技术发展成长要有跨语言的技术储备 2. 科技企业也都在这方面有所储备，动作快的已经落地应用 3. 工程化是 Rust 在前端领域实践的最好的场景，放心入 4. Rust 在前端领域未来会有更多的场景

29.

30. 交个朋友关注推特 @rspack_dev 关注项目