前言

春節(jié)剛歸來，我們不搞那么燒腦，先來一篇淺顯易懂的文章，期望給大家?guī)硪恍┬碌慕忸}思路。

背景

過去多年無論是一款插件推廣，還是組件庫統(tǒng)一，無論是一次機(jī)制流程制定，還是前端工程化體系建設(shè)，相信很多同學(xué)與我一樣，在跨團(tuán)隊(duì)方案推廣統(tǒng)一過程中，前期無論做好多詳實(shí)的準(zhǔn)備，最終都會(huì)有一種未竟全功的感覺。

推廣過程中，總會(huì)有人擺出歷史包袱過重這一攔路虎“說服”我們，比如”我這項(xiàng)目不維護(hù)了，無需升級(jí)“，”我這項(xiàng)目框架太老舊了，無法升級(jí)“，或兩者兼有之，到底改哪些項(xiàng)目，多取決于雙方自行判斷，說穿了其實(shí)是雙方“非不能也，乃不欲也”。

危害

一方面前端項(xiàng)目下線充滿不確定性，業(yè)務(wù)不維護(hù)不代表頁面無訪問，舊有項(xiàng)目中總有一些頁面殘留，需要長期持續(xù)跟進(jìn)。

另一方面過去多年前端技術(shù)生態(tài)快速向前發(fā)展，造成了不同部門、時(shí)期，從jquery、vue2、vue3、react、angular到webpack3、4、5、gulp、vite等前端基建五花八門的場景，僅23年我們團(tuán)隊(duì)就先后接入過webpack5、vite、pinia、rspack等前端架構(gòu)局部優(yōu)化，跨團(tuán)隊(duì)統(tǒng)一需要做大量兼容工作，全量統(tǒng)一困難。

前端項(xiàng)目的業(yè)務(wù)和技術(shù)特點(diǎn)，造成了前端項(xiàng)目數(shù)量基本越壘越多，每個(gè)項(xiàng)目總有幾個(gè)有流量的頁面時(shí)不時(shí)跳出來惡心人。造成了前端基建越來越龐雜，兼容成本偏高，總是不能全量升級(jí)。形成了前端項(xiàng)目獨(dú)特的長尾化問題，項(xiàng)目長尾化，基建長尾化，團(tuán)隊(duì)意識(shí)長尾化。隨著時(shí)間延續(xù)會(huì)帶來升級(jí)維護(hù)困難和難以言表的線上偶發(fā)驚嚇。

根源和解決思路

基于我司經(jīng)驗(yàn)，問題產(chǎn)生根源一是前端團(tuán)隊(duì)資源有限，并不能覆蓋全部項(xiàng)目；二是沒有統(tǒng)一標(biāo)準(zhǔn)，項(xiàng)目缺乏統(tǒng)一標(biāo)準(zhǔn)管理，各團(tuán)隊(duì)自我決策改動(dòng)范圍；三是缺乏強(qiáng)制機(jī)制，并不能保證完成效果和時(shí)間。

資源有限是個(gè)基本無法解決的問題，我們只能從標(biāo)準(zhǔn)和強(qiáng)制機(jī)制兩個(gè)角度去解決，基于此我們針對(duì)性的制定了轉(zhuǎn)轉(zhuǎn)自己的項(xiàng)目動(dòng)態(tài)分級(jí)標(biāo)準(zhǔn)和強(qiáng)制倒逼機(jī)制。

項(xiàng)目動(dòng)態(tài)分級(jí)

分級(jí)指的是用客觀統(tǒng)一的數(shù)據(jù)標(biāo)準(zhǔn)反映項(xiàng)目重要性，規(guī)避主觀評(píng)判。動(dòng)態(tài)指的是隨著時(shí)間延續(xù)，項(xiàng)目走過新建、迭代、維護(hù)、下線的生命周期，客觀數(shù)據(jù)也隨生命周期波谷、波峰、波谷往復(fù)更替。項(xiàng)目動(dòng)態(tài)分級(jí)的最大好處是將有限資源聚焦在重點(diǎn)項(xiàng)目上。

以過去我司推進(jìn)項(xiàng)目代碼規(guī)范為例，我們?cè)O(shè)計(jì)時(shí)采用項(xiàng)目月活躍分支數(shù)、月代碼提交行數(shù)、項(xiàng)目用戶日訪問量幾個(gè)指標(biāo)確定項(xiàng)目級(jí)別；

動(dòng)態(tài)項(xiàng)目池

比如只有同時(shí)滿足日訪問量UV高于10000、日PV高于100000、月活躍分支數(shù)多于4個(gè)、月代碼提交行數(shù)多于200的項(xiàng)目才確定為移動(dòng)端重點(diǎn)項(xiàng)目，其它項(xiàng)目為非重點(diǎn)項(xiàng)目，每日或每周可以跑定時(shí)任務(wù)更新項(xiàng)目分級(jí)數(shù)據(jù)，具體數(shù)據(jù)可以通過拉取git api和公司前端埋點(diǎn)數(shù)據(jù)獲得。

針對(duì)重點(diǎn)項(xiàng)目，可以制定2-4個(gè)月的改造時(shí)間節(jié)點(diǎn)和達(dá)標(biāo)標(biāo)準(zhǔn)，非重點(diǎn)項(xiàng)目可以不做改造或制定其它策略。

我司前端項(xiàng)目數(shù)不到千，僅將項(xiàng)目分成重要和不重要兩個(gè)級(jí)別已經(jīng)夠用，如場景有必要，也可將項(xiàng)目進(jìn)一步拆分為更多級(jí)別。

指標(biāo)邊界值

大家可能對(duì)上面UV > 10000或月活躍分支數(shù) > 4 等指標(biāo)邊界值是怎么確定的感興趣？

說一下我們的思路，相信每個(gè)前端團(tuán)隊(duì)過去都手動(dòng)收集過團(tuán)隊(duì)中的重點(diǎn)項(xiàng)目有哪些，這些手動(dòng)數(shù)據(jù)可以作為我們的衡量基礎(chǔ)，可以不斷嘗試調(diào)整我們的指標(biāo)邊界值，計(jì)算出的重點(diǎn)項(xiàng)目一般達(dá)到基本覆蓋我們手動(dòng)收集的95%以上重點(diǎn)項(xiàng)目即可，以此來確定邊界值指標(biāo)，一般結(jié)果肯定會(huì)大于我們的手動(dòng)集，大家拿到結(jié)果可以人工再去分析下具體項(xiàng)目，基本能夠發(fā)現(xiàn)多出來的項(xiàng)目大部分都是真實(shí)的重點(diǎn)項(xiàng)目，大部分都是因?yàn)槲覀冋劦降臍v史包袱問題，不提罷了。

注意如果動(dòng)態(tài)項(xiàng)目池，每日或每周都有較大變化，可能是你的指標(biāo)不太合理，可以考慮擴(kuò)大或縮小邊界值來解決。另外注意突然進(jìn)入重點(diǎn)動(dòng)態(tài)項(xiàng)目池的項(xiàng)目，一般下個(gè)周期有可能就波動(dòng)出去了，此類項(xiàng)目可以不做處理，也可推動(dòng)解決，留好一定改動(dòng)時(shí)間即可。

多指標(biāo)好處

相比單指標(biāo)確定邊界值，多指標(biāo)有哪些好處呢？

多指標(biāo)好處一個(gè)是覆蓋全部場景，比如我司移動(dòng)端項(xiàng)目框架為Vue，有大量用戶訪問，中后臺(tái)項(xiàng)目技術(shù)棧為React，沒有大量用戶訪問。如果僅使用用戶訪問量指標(biāo)，中后臺(tái)項(xiàng)目全部會(huì)被排除在重點(diǎn)項(xiàng)目外，如果僅使用項(xiàng)目活躍度，移動(dòng)端最看重的用戶訪問量不被納入，項(xiàng)目區(qū)分度不夠，但是兩者相結(jié)合，恰好能覆蓋移動(dòng)端和PC端的全量場景。

另一個(gè)是多指標(biāo)得出的結(jié)果穩(wěn)定性更好，不會(huì)因單指標(biāo)劇烈變化造成結(jié)果波動(dòng)太大的情況，比如去年618和雙11期間，盡管我司用戶訪問量大增，但重點(diǎn)項(xiàng)目集并沒有什么變化。

強(qiáng)制倒逼機(jī)制

另外怎么確保deadline無延期呢？

我司采用的解決辦法是與上線環(huán)節(jié)綁定，通過強(qiáng)攔截和審批攔截的方式，確保各團(tuán)隊(duì)能在最終時(shí)間節(jié)點(diǎn)之前，完成全部項(xiàng)目的改造。除此之外，強(qiáng)制機(jī)制能夠倒逼各團(tuán)隊(duì)提升生產(chǎn)率，將很多重復(fù)性工作自動(dòng)化，比如上文說到的代碼規(guī)范，總會(huì)有同學(xué)梳理出一套本地自動(dòng)化方案，幫我們完成配套建設(shè)。當(dāng)我們標(biāo)準(zhǔn)達(dá)成、配套健全后，就可以考慮下擴(kuò)大范圍或者提高標(biāo)準(zhǔn)的事情了。

另外大家需要注意，跨組推進(jìn)工作中很重要的一點(diǎn)是前置溝通，給同學(xué)們留下足夠的時(shí)間，比如2-6個(gè)月，達(dá)成時(shí)間共識(shí)很重要，不要自覺良好一刀切，想想過去經(jīng)歷的很多跨組項(xiàng)目，半年能徹底搞完就很不錯(cuò)了。

自循環(huán)機(jī)制

思路&基建復(fù)用

本文談到的整套分級(jí)和強(qiáng)制思路，后續(xù)逐步復(fù)用在我司代碼重復(fù)度、復(fù)雜度、線上異常治理、性能指標(biāo)等多項(xiàng)跨團(tuán)隊(duì)公共事項(xiàng)落地中，有些指標(biāo)直接復(fù)用同一套項(xiàng)目分級(jí)標(biāo)準(zhǔn)即可，有些指標(biāo)需要一定的改動(dòng)，比如性能指標(biāo)，就從重點(diǎn)項(xiàng)目，變?yōu)橹攸c(diǎn)頁面即可，大部分基礎(chǔ)能力和解決問題的思路仍可復(fù)用。

總結(jié)

保持公司各團(tuán)隊(duì)基建、標(biāo)準(zhǔn)、機(jī)制統(tǒng)一，長期看是非常有必要的事，但過去受制于歷史包袱問題這一隱性攔路虎，前端很難做到跨團(tuán)隊(duì)統(tǒng)一方案的效用最大化，總會(huì)留下一些尾巴，本文通過轉(zhuǎn)轉(zhuǎn)過去的實(shí)踐，給出了項(xiàng)目分級(jí)和強(qiáng)制機(jī)制的解體思路，非常適合前端資源并不那么充足的公司，至少能夠保證公司重要的項(xiàng)目長期標(biāo)準(zhǔn)統(tǒng)一。

另外整個(gè)思路的落地，除標(biāo)準(zhǔn)制定外，還涉及到數(shù)據(jù)抽取、各指標(biāo)檢測、CICD集成、報(bào)警機(jī)制、系統(tǒng)開發(fā)等多方面的具體工作，每一部分都能作為一個(gè)單獨(dú)的模塊去做分享，比如代碼規(guī)范涉及到的項(xiàng)目代碼增量存量檢測、代碼復(fù)雜度、重復(fù)度檢測，線上異常治理涉及到的實(shí)時(shí)報(bào)警策略、錯(cuò)誤分級(jí)策略等，因篇幅關(guān)系，本文不再贅述。