【王舒源】Rspack：性能快 5 到 10 倍的新一代前端构建工具.pdf

1、R Rs sp pa ac ck k:性性能能快快WWe eb bp pa ac ck k 5 5-1 10 0倍倍的的前前端端构构建建工工具具演演讲讲人人 王舒源字节跳动 Web Infra 前端工程师字节跳动 Web Infra 前端工程师 Rspack 团队核心成员GitHub h-a-n-a王王舒舒源源目目录录1.Why Rspack?2.特性3.生态兼容性4.从 Webpack 迁移5.性能收益6.架构设计7.展望0 01 1WWh hy y R Rs sp pa ac ck k?WWh hy y R Rs sp pa ac ck k?开开发发/生生产产构构建建时时间间长长配配置置不

2、不灵灵活活产产物物性性能能不不达达标标 对对于于市市面面上上的的工工具具来来说说：开开发发/生生产产构构建建性性能能差差开发：启动时间过长，通常为 5-10 分钟，单次 HMR 10-20 秒生产：构建时间过长，通常为 10-20 分钟，降低持续部署的效率耗时均基于公司内部实际项目统计配配置置灵灵活活性性低低公司业务种类繁多，需要支持各种开发场景大多数开发工具无法同时满足“高构建性能”与“优秀的配置灵活性”新生代构建工具生态不够成熟，部分场景无法开箱即用生生产产环环境境优优化化能能力力弱弱产物的性能直接影响了用户体验大多数开发工具无法同时满足“高构建性能”与“优秀的生产环境优化能力”开开发发者

3、者们们的的诉诉求求对性性能能的诉求：冷启动要快，生产构建也要快对灵灵活活性性的诉求：构建工具的配置要足够灵活，能应对各种使用场景对生生产产环环境境产产物物性性能能的诉求：Code Splitting 等能力决定了产物性能R Rs sp pa ac ck k基于 Rust 的高性能 Web 构建引擎0 02 2特特性性特特性性 基于 Rust 实现，内置增增量量编编译译机制，HMR/构建速度极快 针对 webpack 的架构和生态进行兼兼容容，无需从头搭建你的生态 提供 TS、TSX、JSX、CSS、CSS Modules、Sass 等开开箱箱即即用用的支持 默认内内置置多多种种优优化化策策略略

4、，如 Tree Shaking、Code Splitting、代码压缩等等0 03 3生生态态兼兼容容性性生生态态兼兼容容性性:V Vu ue e.j js sVue3&Less 示例配置（vue-loader17.2.2+）本文使用的 Vue.js Logo 遵循 MIT 协议 的规定生生态态兼兼容容性性:V Vu ue e.j js s本文使用的 Vue.js Logo 遵循 MIT 协议 的规定Block lang 语法：TypeScript&LessTS 语法处理：Rspack 内置后处理Less 语法处理：less-loader-Rspack 内置后处理生生态态兼兼容容性性:R Re

5、 ea ac ct t本文使用的 React Logo 遵循 CC BY 4.0 许可证 的规定ReactRspack 原生支持了 JSX，TSXDev 下内置支持 React FastR生生态态兼兼容容性性:S Sv ve el lt te eSvelte本文使用的 Svelte Logo 遵循 MIT 协议 的规定Svelte 配置示例 生生态态兼兼容容性性:WWe eb bp pa ac ck k L Lo oa ad de er rbabel-loaderstyle-loadercss-loaderpostcss-loadersass-loaderless-loaderraw-load

6、erfile-loaderurl-loadervue-loadersvelte-loadermdx-js/loadersvgr/webpackimage-webpack-loaderthread-loadersource-map-loadernode- 生生态态兼兼容容性性:WWe eb bp pa ac ck k P Pl lu ug gi in nhtml-webpack-plugin react-refresh-webpack-plugin webpack.DefinePlugin webpack.ProvidePlugin mini-css-ex