近日，在WOT全球技術創新大會2023“大前端最佳實踐”分論壇上，字節跳動前端架構工程師林宜丙分享了主題為“字節跳動的前端工程化實踐”的演講。

顧名思義，前端工程化就是在前端開發過程中采用一系列技術手段和工具來提升代碼質量，提高代碼復用性，實現自動化流程，從而提高前端開發效率。

近年來，前端開發出現諸如開發平臺增多、支撐業務增多、開發和維護團隊人員增多等新趨勢，企業也隨之面臨著多項目維護成本高、應用體積增大、代碼治理難度增加、開發和維護成本提高等挑戰。林宜丙團隊針對多項目的維護成本高、多人協作成本高、巨型應用構建速度慢、大型應用劣化速度快等挑戰，開展了一系列優化實踐。

Monorepo工程化實踐，降低多項目維護成本

Monorepo是一種代碼管理模式，這種模式將子項目組織到一個大型的倉庫中，以實現前端代碼的統一維護。相較于子項目分布在不同的倉庫中，并需要分別維護的Polyrepo模式而言，Monorepo模式可以通過復用基建、代碼共享、原子提交等方式來降低多項目的維護成本。

利用Monorepo模式進行前端開發管理，只需要一到兩個開發人員就可以建立大型Monorepo工程，所有項目都能在這個工程中進行維護。同時，基建也可以被充分復用，這就允許開發人員可以將同一個操作應用到多個項目中，從而提高項目升級效率，降低多項目升級成本。

其次，Monorepo模式還允許開發人員一鍵創建公用模塊，并且頂層模塊可以感知到公用模塊調試時的改動，這樣就省去了開發人員進行npm link發布的環節。此外，在Monorepo模式下，開發人員通過原子提交，可以?次性調整并提交多個項?，再加之自動且連續的 CI 流程，開發人員便能實現多項目連續一致性的工作流程，從而極大地降低了多項目維護成本。

Bundler & Build System工程化實踐，提高巨型應用構建速度

面對巨型應用構建速度慢的問題，林宜丙團隊做了兩個建設：Bundler及Build System。前者用來加快單個倉庫下巨型應用的構建速度，后者用來加快巨型Monorepo工程的構建速度。

Bundler能夠處理?件之間的模塊依賴關系圖，并將其打包成靜態資源。在前端開發中，可以將多個前端開發資源，比如JSS、CSS等打包成一個或者多個入口文件，并可以在瀏覽器上直接運行。

常見的Monorepo工具有Webpack、Rollup、Vite、Parcel、Esbuild等等，字節跳動自研的Bundler工具Rspack是基于Rust的高性能構建引擎、具備與Webpack生態系統互操作性。由于Rust語言本身的特點，Rspack能實現并發的特性，每一個線程或者每個CPU都能被充分的利用。因此，在處理同一個項目時，Rspack只需要4.2秒，而Webpack卻需要34.8秒。Rspack的構建速度做到了極大的提升。

此外，Rspack能夠達到與Webpack生態的部分兼容。就實現情況來看，Rspack相當于Webpack的一個子集，通過實現很多常用的Webpack配置、loader以及插件等，來滿足當下前端的業務開發。與Webpack生態的部分兼容使得Rspack在接入業務時，無論是build、Dev還是HMR，都普遍提升了十倍左右的效率。

而Build system的任務則是處理Monorepo模式下項目的依賴關系，再根據依賴關系組織或調度構建的任務。相較于市場上的常用工具，Build system通過任務并行能力、多級緩存能力和按需構建能力將任務構建時間從十幾秒降低到幾秒鐘，從而促進巨型應用的構建速度大幅度提升。

通過建設Bundler和Build system極大地提高了巨型應用的構建速度，同時也為業務帶來了兩個巨大的收益：一是拉高了巨型應用的上限，開發人員就能在此基礎上開發更巨型或者功能更強大、更復雜的應用；二是因為有更快的構建速度，在某種程度上也加快了迭代速度，從而提高用戶滿意度，便于企業業務推廣與創收。

Micro Frontend ?程化實踐，降低多人開發協作成本

首先，Micro Frontend 通過減輕基座的負擔，讓基座應用與業務邏輯解耦，并通過消費機制復用業務相關邏輯，通過共享機制復用業務相關工具庫，使得每個組件或每個邏輯都可以單獨升級，從而減少開發壓力，提高開發效率。

其次，提供更細粒度的模塊組合，并利用沙箱機制隔離開發之間的影響。更細粒度模塊的子應用消費方案和共享方案，讓開發人員能夠在模塊級別上進行獨立開發和測試部署。

最后，利用Micro Frontend提出模塊的協議標準，模塊的協議標準可以約定模塊的源信息，通過流轉于各個平臺實現一些特定的功能，并在運行時根據協議動態加載遠程的和共享的模塊，再結合低碼平臺進一步的提高模塊的復用率，開發人員就能夠迅速搭建一個在線模塊中心，并實現共享便捷化。因此，微前端架構將業務構建耗時從SPA架構的17m43s成功降低到8m。部署耗時也從10m22s降低到2m，月均發布效率的大幅提高也推動需求迭代率和吞吐量有了顯著提升。

Diagnostics Tool ?程化實踐，有效防止應用劣化

由于市面上常見的診斷工具大多面向構建產物，缺少構建過程的信息，因此在防止應用劣化方面能夠做到的分析十分有限。基于這種情況，林宜丙團隊通過三個方式去提高防止應用劣化的能力。

一是面向構建過程，豐富構建過程信息，使開發人員做出更細粒度和更豐富的分析；二是可擴展的規則機制，允許業務場景或者垂直框架場景自定義規則；三是與研發流程結合，在CI中讓規則真正發生作用。

新方案落地后，開發團隊能夠重新收集組裝專門用于構建整段場景的數據結構，從而獲得更豐富的上下文去完成下一步更細致的診斷。利用足夠多的信息生成數據結構，清晰的數據結構允許用戶自定義規則，用戶也因此能夠方便地實現以依賴引用的方式檢查應用、用特定依賴的版本檢查應用等功能。此外，謀求與CI流程的結合，讓規則真正發生作用，從而有效防止應用劣化。

當上述一系列工具有效支撐了更大的工程規模，更多的開發人員，更快的構建速度，以及更高的可維護性，勢必會催生出一個更強大的前端應用。而更強大的前端應用又繼續擴大工程規模，增加團隊人員，逐漸拉低應用構建速度和可維護性，從而再次對前端工具鏈提出更高的要求，繼續帶動前端工具鏈進行下一輪的革新。

【點擊鏈接】關注林宜丙老師社交賬號，了解更多精彩內容。

本文整理自字節跳動前端架構工程師林宜丙在WOT2023大會上的主題分享，更多精彩內容及現場PPT，請關注《51CTO技術棧》公眾號，發消息【WOT2023PPT】即可直接領取。