日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

你沒看錯(cuò)，Github前端團(tuán)隊(duì)花費(fèi)大半年時(shí)間，成功將項(xiàng)目依賴包體積減少30kb。

減少的部分是啥呢?jQuery。

技術(shù)還是技術(shù)債

多年以來，Github逐漸發(fā)展為一家擁有數(shù)百名工程師的公司。

作為一家大公司，一部分人被劃分出來從事性能優(yōu)化工作。

但是，狼多肉少，哪有那么多可優(yōu)化點(diǎn)呢?

找新的性能優(yōu)點(diǎn)難，找你老代碼的麻煩還不容易?

于是，團(tuán)隊(duì)將目光盯向了「技術(shù)債」。

魯迅曾說過，前人用過的技術(shù)，如果阻礙后人重復(fù)造輪子，就成技術(shù)債了。

那么該挑哪個(gè)債來還呢?jQuery真是不二人選。原因如下：

• 廣泛依賴，這一改起來工作量絕對有了
• jQuery代表老一代web開發(fā)方式。一下替換個(gè)新潮的，這對比，明顯!
• jQuery好說也有30kb，蒼蠅雖小也是肉

說干就干，讓我們先評估下工作量。

工作量max max max

新人這時(shí)候犯嘀咕：“這工作量，我估保守點(diǎn)，逐步替換，一周開發(fā)，一周測試，2周上線?”

組長啪的一下拍桌子：“那得是996的小作坊才這么干!我們大公司做事得專業(yè)，這事兒得「穩(wěn)步迭代，增量解耦」”。

首選：我們得建立指標(biāo)跟蹤，統(tǒng)計(jì)每行代碼中jQuery的調(diào)用次數(shù)。

實(shí)時(shí)監(jiān)控，確保指標(biāo)穩(wěn)步下降。

調(diào)用次數(shù)統(tǒng)計(jì)

其次，要有專人開發(fā)一個(gè)lint(見eslint-plugin-jquery)，全團(tuán)隊(duì)普及，避免大家繼續(xù)使用jQuery方法。

一屏截不完的規(guī)則

新人問：“那有人添加eslint-disable繞過規(guī)則怎么辦?”

組長微微一笑，“小伙子，上道了啊?！?/p>

還得開發(fā)一個(gè)Github機(jī)器人，每當(dāng)有人提交的新代碼中包含eslint-disable規(guī)則，機(jī)器人會通知團(tuán)隊(duì)成員，這樣我們能盡快介入review代碼。

最后，jQuery作為一個(gè)模塊化的庫，為了保證「穩(wěn)步移除」，我們需要維護(hù)一個(gè)自定義jQuery版本。

每當(dāng)確定一個(gè)模塊不再使用，就從自定義版本中移除他，并提供一個(gè)更小體積的版本。

比如：當(dāng)完全用fetch替換$.ajax后，就能將AJAX模塊剔除。

“這一通操作下來，沒有半年工作量，我看不行?！苯M長輕靠椅背，輕輕搖了搖頭，說道。

升華主題

你以為這就完啦?naive～

前面做的，只能說穩(wěn)步推進(jìn)工作。接下來說的，才是KPI的重中之重。

jQuery被移除，項(xiàng)目必然出現(xiàn)很多原生JS。

重復(fù)代碼多了得抽象、得封裝是吧?

“您是說上框架!Vue還是Angular?”新人搶答道。

“小啦!格局小啦!”組長長嘆一口氣。

“當(dāng)然是擁抱標(biāo)準(zhǔn)。Vue的模版語法也是根據(jù)Web Components標(biāo)準(zhǔn)演化來的。”

“我們要引!領(lǐng)!時(shí)!代!”

從現(xiàn)在開始，所有可復(fù)用的功能組件都封裝為Web Components。

比如「復(fù)制粘貼」功能，要封裝為clipboard-copy：

 
 
 
 
  
  
  
  
 
  
  
  
  
  點(diǎn)擊復(fù)制 
  
  
  
  
 
  
  
  
  
src/index.js