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

你沒看錯，Github前端團隊花費大半年時間，成功將項目依賴包體積減少30kb。

減少的部分是啥呢?jQuery。

技術還是技術債

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

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

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

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

于是，團隊將目光盯向了「技術債」。

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

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

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

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

工作量max max max

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

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

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

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

調用次數(shù)統(tǒng)計

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

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

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

組長微微一笑，“小伙子，上道了啊。”

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

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

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

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

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

升華主題

你以為這就完啦?naive～

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

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

重復代碼多了得抽象、得封裝是吧?

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

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

“當然是擁抱標準。Vue的模版語法也是根據(jù)Web Components標準演化來的。”

“我們要引!領!時!代!”

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

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

 
 
 
 
  
  
  
  
 
  
  
  
  
  點擊復制 
  
  
  
  
 
  
  
  
  
src/index.js