字节跳动在前端研发工具一体化上的实践 —— Rstack - 陈嘉涵.pdf

1、19TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会19TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会19TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会19TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会字节跳动在前端研发具 体化上的实践 Rstack字节跳动-Web Infra-陈嘉涵About me字节 Web Infra 成员Rspack team 成员陈嘉涵/neverlandRsbuild

2、作者Vant 作者Rspack 更快、更现代的 webpack 解决字节内部 10000+个webpack 项的效率问题 使 Rust 语编写字节临的挑战Web 应跨端应组件库/具库研框架研框架研具webpackesbuildrollup前端具链的碎化-以打包具为例研发场景上层封装打包具Rspack碎化的 JS 态JavaScript Rust 每种具都有 35 个主流选择，穷的排列组合 开发者的智负担碎化引发的问题 开发者的智负担 基建团队的答疑压碎化引发的问题 如何把个业务组件发布给其他团队复？开发组件库时能 webpack-bundle-analyzer 插件吗？externals 配置

3、项的法跟 webpack 不样？more碎化引发的问题 插件开发的作量翻倍 开发者的智负担 unplugin:简单插件的最优解 插件开发的作量翻倍 开发者的智负担碎化引发的问题围绕 Rspack 来统前端具链Rstack字节前端的统具链要问题webpack 配置过于复杂Rspack打包具/性能Rsbuild构建具/开箱即RstackRsbuild基于 Rspack 的构建具，开箱即RsbuildViteCRARspackRollupWebpackbuild toolsbundler 为什么需要区分打包具和构建具？RsbuildRspack 覆盖所有场景，配置丰富 针对Web 应，零配置启动Rs

4、buildRspack 覆盖所有场景，配置丰富 针对Web 应，零配置启动 覆盖所有场景，配置丰富 针对Web 应，零配置启动 极致的灵活性和扩展性 平衡开箱即和扩展性RsbuildRspack 极致的灵活性和扩展性 平衡开箱即和扩展性 更关注性能和产物优化 更关注开发体验和程实践 覆盖所有场景，配置丰富 针对Web 应，零配置启动RsbuildRspack减少重复开发统插件系统降低学习成本统配置定义统构建流程复编译缓存将更多场景纳统技术栈Rspress档具/MDXRslib库开发具/ESMRspeedy跨端开发具/LynxRstackRslib的诞 为什么 webpack 态缺少好的库开发具

5、webpack 的 ESM TODO 列表webpack ESM 的不 产物不纯净，带有运时代码 产物对 tree shaking 不友好源代码示例webpack ESM 的不 产物不纯净，带有运时代码webpack ESM 产物webpack ESM 的不 产物对 tree shaking 不友好 产物对 tree shaking 不友好 产物不纯净，带有运时代码webpack ESM 的不Rslib 改进 Rspack 以产出质量的 ESM 复 Rspack 态 开箱即地创建 JS 库Rslib ESM 产物RstackRstest测试具（开发中）Rsdoctor构建分析具/可视化Rsdo

6、ctor构建信息可视化Rspack打包具/性能Rsbuild构建具/开箱即Rspress档具/MDXRslib库开发具/ESMRspeedy跨端开发具/LynxRstackRstest测试具（开发中）Rsdoctor构建分析具/可视化Rstack ecosystemRstack 态 快速发展的社区态RsbuildRspressRslibRsdoctorDocusaurusStorybookNuxtNxRe.PackModule FederationVueModern.jsReactAngular?LynxRstack 态 快速发展的社区态React Na