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

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

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

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

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

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

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

Bundler & Build System工程化實踐，提高巨型應(yīng)用構(gòu)建速度

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

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

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

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

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

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

Micro Frontend ?程化實踐，降低多人開發(fā)協(xié)作成本

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

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

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

Diagnostics Tool ?程化實踐，有效防止應(yīng)用劣化

由于市面上常見的診斷工具大多面向構(gòu)建產(chǎn)物，缺少構(gòu)建過程的信息，因此在防止應(yīng)用劣化方面能夠做到的分析十分有限?；谶@種情況，林宜丙團隊通過三個方式去提高防止應(yīng)用劣化的能力。

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

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

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

【點擊鏈接】關(guān)注林宜丙老師社交賬號，了解更多精彩內(nèi)容。

本文整理自字節(jié)跳動前端架構(gòu)工程師林宜丙在WOT2023大會上的主題分享，更多精彩內(nèi)容及現(xiàn)場PPT，請關(guān)注《51CTO技術(shù)?！饭娞枺l(fā)消息【W(wǎng)OT2023PPT】即可直接領(lǐng)取。