Github團(tuán)隊(duì)成功減少的30kb依賴體積是什么

本篇文章給大家分享的是有關(guān)Github團(tuán)隊(duì)成功減少的30kb依賴體積是什么，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

你沒看錯，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)演化來的?！?/p>

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

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

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

<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">   點(diǎn)擊復(fù)制 </clipboard-copy> <div id="blob-path">src/index.js</div>

 遵照HTML標(biāo)準(zhǔn)習(xí)慣，點(diǎn)擊clipboard-copy組件后會將for屬性指向的id選擇器對應(yīng)內(nèi)容復(fù)制到剪貼板。

示例代碼

具體實(shí)現(xiàn)

并且開啟Shadow DOM，使組件對外封閉，不會影響其他組件。

你問兼容性?小啦!格局又小啦!

我們這樣的企業(yè)就是要推動瀏覽器廠商進(jìn)步的。

最終產(chǎn)出了有1.4k star的Web Components組件庫github-elements

經(jīng)過大半年的努力，Github團(tuán)隊(duì)成功將jQuery從項(xiàng)目依賴中根除，減少30kb依賴體積。

如果你審查Github頁面代碼，會時(shí)不時(shí)看到Web Component，比如：

以上就是Github團(tuán)隊(duì)成功減少的30kb依賴體積是什么，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。