抛開 Vue、React、JQuery 這類第三方js，我們該怎麽寫代碼？

第三方js的(de)現狀

無論是新入行的(de)小白還是有經驗的(de)程序員，前端圈裏的(de)人一(yī)定聽過這類第三方js的(de)大名。一(yī)方面是因為(wèi)它們實在太火了：

• 各種文章(zhāng)對框架進行對比、源碼解析以。

• GitHub 上 star 數量高(gāo)速增長(cháng)。

• 各種針對框架的(de)培訓課程層出不窮。

• ……

另一(yī)方面是因為(wèi)用它們開發非常方便：

• 利用腳手架工具幾行命令就可(kě)以快速搭建項目。

• 減少大量的(de)重複代碼，結構更加清晰，可(kě)讀性強。

• 有豐富的(de)UI庫和(hé)插件庫。

• ……

但是一(yī)則 GitHub 放棄使用 JQuery 的(de)消息讓我開始思考：

第三方js除了帶來便利之外還有哪些副作用？抛棄第三方js我們還能寫出高(gāo)效的(de)代碼嗎？

第三方js的(de)副作用

雪球滾起來

如(rú)果現在讓你開發一(yī)個項目，你會怎麽做(zuò)？假設你熟悉的(de)是React，那麽用可(kě)以用create-react-app快速搭建一(yī)個項目。

• 很好，react、react-dom、react-router-dom 已經寫入了package.json，不過事情還沒完。

• http請求怎麽處理(lǐ)呢(ne)？引入axios吧(ba)。

• 日期怎麽處理(lǐ)？引入 moment 或 day 吧(ba)。

• ……

要知道(dào)，這種“拿來主義”是會“上瘾”的(de)，所以第三方依賴就像一(yī)個滾動的(de)雪球，随着開發不斷增加，後所占體積越來越大。如(rú)果用 webpack-bundle-analyzer 工具來分析項目的(de)話，會發現項目代碼大部分體積都在node_modules目錄中，也就意味着都是第三方js，典型的(de)二八定律（80%的(de)源代碼隻占了編譯後體積的(de)20%）。

類似下面這張圖：

于是不得不開始優化，比如(rú)治标不治本的(de)code split（代碼體積并沒有減小，隻是拆分了），比如(rú)萬試萬難靈的(de) tree shaking（你确定shaking之後的(de)代碼都隻有你真正依賴的(de)代碼？），優化效果有限不說，更糟糕的(de)是依賴的(de)捆綁。比如(rú)ant-design的(de)模塊的(de)日期組件依賴了 moment，那我們在使用它的(de)時候moment就被引入了。而且我即使發現體積更小的(de) dayjs可(kě)以基本取代moment的(de)功能，也不敢引入，因為(wèi)替換它日期組件會出問題，同時引入又增加了項目體積。

有些第三方js被合稱之為(wèi)“全家桶”，這種叫法讓我想起了現在PC端的(de)一(yī)些工具軟件，本來你隻想裝一(yī)個電腦管家，結果它不斷彈窗提示你電腦不安全，建議你安裝一(yī)個殺毒軟件，又提示你軟件很久沒更新，提示你安裝某某軟件管家…..本來隻想裝一(yī)個，結果裝了全家。

編輯:--ns868