【王舒源】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-extract-plugin tsconfi

7、g-paths-webpack-plugincopy-webpack-pluginwebpack-bundle-analyzerwebpack-stats-pluginfork-ts-checker-webpack-plugin=rspack/plugin-html or builtins.html=builtins.react.refresh=builtins.define=builtins.provide=experiments.css=resolve.tsconfigPath=builtins.copy/copy-webpack-0 04 4從從 WWe eb bp pa ac ck k

8、 遷遷移移 從從 WWe eb bp pa ac ck k 遷遷移移:T Ty yp pe eS Sc cr ri ip pt tWebpack ts-loaderWWe eb bp pa ac ck kR Rs sp pa ac ck k*避免使用 babel-loader、ts-loader 等 JS Loader 以獲得最佳的構建時性能TypeScript 是 Rspack 中的一等公民，我們提供了開箱即用的能力 從從 WWe eb bp pa ac ck k 遷遷移移:C CS SS S、C CS SS S MMo od du ul le es sCSS、CSS Modules 是 R

9、spack 中的一等公民，我們提供了開箱即用的能力Webpack css-loader&mini-css-extractWWe eb bp pa ac ck kR Rs sp pa ac ck k零配置，開箱即用 從從 WWe eb bp pa ac ck k 遷遷移移:C CS SS S 預預處處理理器器由于 Rspack 對 Loader 良好的兼容性，和 Native CSS 可以進行完美的搭配Webpack less-loader&css-loader&mini-css-extractWWe eb bp pa ac ck kR Rs sp pa ac ck kRspack less-l

10、oader&Native CSS 更更多多遷遷移移指指南南Webpack 遷移指南rspack.devRspack 遷移 ShowcaseGitH0 05 5性性能能收收益益 性性能能收收益益web-infra-dev/performance- 性性能能收收益益0 06 6架架構構設設計計 架架構構設設計計拋棄 Webpack？更快的 Webpack！ 架架構構設設計計1.高度 LTO 的代碼2.高并發度 架架構構設設計計:增增量量編編譯譯 架架構構設設計計1.目前已和 Webpack Core Team 達成合作關系2.正在遷移 Webpack 的測試用例3.聆聽 Rspack 與 Webpack 雙方社區的意見0 07 7展展望望 展展望望1.支持更多常用框架：Angular2.完善插件 API，兼容更多 Webpack 生態3.支持 Module Federation 模塊聯邦4.支持 Lazy Compilation 懶編譯5.支持 Persistent Cache 持久緩存6.更多生產環境優化策略7.持續優化構建性能 聯聯系系我我們們官方文檔(rspack.dev)GitHub(web-infra-dev/rspack)T TH HA AN NK KS S