字節跳動-何云飛-Rspack - 基于 Rust 的高性能 Web 構建工具.pdf

1、Rspack何云-前端程師個簡介 何云 字節跳動前端程師 Rspack 團隊成員 GitHub: Why Rspack?Why not？性能優勢 主要特性 落地情況 迭代模式 未來Rspack 是什么性能的 Web 構建具Why Rspack?Why Rspack?天時地利和Why Rspack?天時地利和天時 中規模的 Web 應的越來越常 開發/產構建時間越來越 社區渴望更好的開發/構建體驗 Vite，Esbuild 產物性能不達標地利天時地利和地利“這個事情簡單來說，就是前端應越來越復雜，Bundler 的瓶頸已經很明顯了，但是社區論是 Webpack、ESBuild、SWC 等等，沒有

2、個能獨擋全，所以我們搞個?？梢越鉀Q業務實際臨的問題，增強與團隊內各種業務基建之間的協同，同時旦做好了之后，可以在未來年引領前端社區的發展趨勢?！盬hy Rspack?天時地利和Why Rspack?開發/產構建時間配置不靈活產物性能不達標 Why Rspack?開發/產構建時間配置不靈活產物性能不達標 配置不靈活 公司業務繁多，需要持各種開發場景 多數開發具法同時滿“構建性能”與“優秀的配置靈活性”新代構建具態不夠成熟，部分場景法開箱即Why Rspack?開發/產構建時間配置不靈活產物性能不達標 產物性能不達標多數開發具法同時滿“構建性能”與“強的產環境優化能”Why Rspack?開發/產

3、構建時間配置不靈活產物性能不達標 開發/產構建時間開發：啟動時間過，通常為 5-10 分鐘，單次 HMR 10-20 秒產：構建時間過，通常為 10-20 分鐘，降低持續部署的效率開發者的訴求對性能的訴求：冷啟動要快，產構建也要快對靈活性的訴求：構建具的配置要夠靈活，能應對各種使場景對產環境產物性能的訴求：Code Splitting 等能決定了產物性能Why not?Why not?EsbuildViteTurbopackWhy not?EsbuildViteTurbopackWhy not?EsbuildViteTurbopackWhy not?EsbuildViteTurbopackTu

4、rbopack結論拋棄 Webpack？更快的 Webpack！Rspack基于 Rust 的性能 Web 構建引擎性能優勢語優勢并計算性能優勢語優勢并計算結論拋棄 Webpack？更快的 Webpack！并計算并計算性能優勢語優勢并計算主要特性Webpack 兼容性增量 HMR開箱即主要特性Webpack 兼容性增量 HMR開箱即開箱即 TypeScript 持 React 持 動打包.png 等資源件 原 CSS/CSS module 持主要特性Webpack 兼容性增量 HMR開箱即BenchmarkBenchmark主要特性Webpack 兼容性增量 HMR開箱即已經兼容的 Loade

5、r vue-loader svelte-loader css-loader style-loader babel-loader node-loader postcss-loader babel-loader sass-loader less-loader raw-loader babel-loader svgr/webpack thread-loader 態兼容性-Vue態兼容性-Svelte落地落地案例 Webpack+Vite案例 Webpack 產環境構建，Vite 于開發模式 把 Webpack 的配置遷移到 Rspack 配置 協調業務側，進回歸測試 產物+內容對 分析收益案例落地R

6、spack&Modern.jsRspack 迭代模式Working group 模式未來懶編譯Module Federation持久化緩存未來懶編譯Module Federation持久化緩存未來懶編譯Module Federation持久化緩存未來懶編譯Module Federation持久化緩存未來賴編譯Module Federation持久化緩存EndQ&A了解更多技術實踐案例思博(msup)有限公司是家向技術型企業的培訓咨詢機構，攜2000余位中外客座導師，服務于技術團隊的能提升、軟件程效能和產品創新迭代，超過3000余家企業續約學習，是科技領域占有率第1的客座導師品牌，msup以整合全球領先經驗實踐為任，為中國產業快速發展提供智庫?？杉軜嬛饕P注互聯架構及可、可擴展及性能領域的知識傳播。訂閱戶覆蓋主流互聯及軟件領域系統架構技術從業員?？杉軜嬒盗猩缛菏莻€社區組織，其精神是“分享+交流”，提倡社區的參與，同時從社區獲得質量的內容。