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

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

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

Monorepo工程化實(shí)踐，降低多項(xiàng)目維護(hù)成本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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