最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

減少的部分是啥呢?jQuery。

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

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

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

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

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

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

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

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

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

說(shuō)干就干，讓我們先評(píng)估下工作量。

工作量max max max

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

組長(zhǎng)啪的一下拍桌子：“那得是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ī)則

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

組長(zhǎng)微微一笑，“小伙子，上道了啊。”

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

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

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

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

“這一通操作下來(lái)，沒(méi)有半年工作量，我看不行?！苯M長(zhǎng)輕靠椅背，輕輕搖了搖頭，說(shuō)道。

升華主題

你以為這就完啦?naive～

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

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

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

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

“小啦!格局小啦!”組長(zhǎng)長(zhǎng)嘆一口氣。

“當(dāng)然是擁抱標(biāo)準(zhǔn)。Vue的模版語(yǔ)法也是根據(jù)Web Components標(biāo)準(zhǔn)演化來(lái)的?！?/p>

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

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

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

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