漫談前端工程化基建和架構設計

大家好，我是若川。持續組織了近一年的源碼共讀活動，感興趣的可以?加我微信?ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。本文留言抽獎送書，具體規則看文末。

透過工程基建，架構有跡可循。

前端開發是一個龐大的體系，紛繁復雜的知識點鑄成了一張信息密度極高的圖譜。在開發過程中，一行代碼就可能使宿主引擎陷入性能瓶頸；團隊中的代碼量呈幾何級數式增長，可能愈發尾大不掉，掣肘業務的發展。這些技術環節，或宏觀或微觀，都與工程化基建、架構設計息息相關。

如何打造一個順滑的工程化流程，為研發效率不斷助力？如何建設一個穩定可靠的基礎設施，為業務產出保駕護航？對于這些問題，我在多年的工作中反復思考、不斷實踐，如今也有了一些經驗和感悟。

因此，我又萌生了寫書的想法。

先來和大家聊聊寫《前端架構師：基礎建設與架構設計思想》這本書的初心吧。

求賢若渴的伯樂和鳳毛麟角的人才

作為團隊管理者，一直以來我都被人才招聘所困擾。經歷了數百場面試，我看到了太多千篇一律的“皮囊”。

我精通Vue.js，看過Vue.js源碼 =?我能熟記Object.defineProperty/Proxy，也知道發布/訂閱模式。
我精通AST ?=?我知道AST是抽象語法樹，知道能用它做些什么。
我能熟練使用Babel ?=?我能記清楚很多Babel配置項，甚至默寫出Babel Plugin模板代碼。

當知識技術成為應試八股文時，人才招聘就會淪為“面試造火箭，工作擰螺絲”的逢場作戲。對于上述問題，我不禁會追問：

你知道Vue.js完整版本和運行時版本的區別嗎？

如果你不知道Vue.js運行時版本不包含模板編譯器，大概率也無法說清Vue.js在模板編譯環節具體做了什么。如果只知道實現數據劫持和發布/訂閱模式的幾個API，又何談精通原理？

請你手寫一個“匹配有效括號”算法，你能做到嗎？

如果連LeetCode上easy難度的編譯原理相關算法題都無法做出，何談理解分詞、AST這些概念？

如何設計一個C端Polyfill方案？

如果不清楚@babel/preset-env的useBuiltIns不同配置背后的設計理念，何談了解Babel？更別說設計一個性能更好的降級方案了。

另一方面，我很理解求職者，他們也面臨困惑。

該如何避免相似的工作做了3年，卻沒能積累下3年的工作經驗？
該如何從繁雜且千篇一律的業務需求中抽身出來，花時間總結經驗、提高自己？
該如何為團隊帶來更高的價值，體現經驗和能力？

為了破局，焦慮的開發者漸漸成為“短期速成知識”的收藏者。你以為收藏的是知識，其實收藏的是“知道”；你以為掌握了知識，其實只是囤積了一堆“知道”。

近些年我也一直在思考：如何抽象出真正有價值的開發知識？如何發現并解決技術成長瓶頸，培養人才？

于是，我將自己在海外和BAT服務多年積累的經驗分享給大家，將長時間以來我認為最有價值的信息系統性地整理輸出。

從前端工程化基建和架構設計的價值談起

從當前的招聘情況和開發社區中呈現的景象來看，短平快、碎片化的內容（比如快速搞定“面經題目”）很容易演變成跳槽加薪的“興奮劑”，但是在某種程度上，它們只能成為緩解焦慮的“精神鴉片”。

試想，如果你資質平平，缺少團隊中“大牛”的指點，工作內容只是在已有項目中寫幾個頁面或配合運營活動，如此往復，技術水平一定無法提高，工作三四年后可能和應屆生并無差別。

這種情況出現的主要原因還是大部分開發者無法接觸到好項目。

這里的“好項目”是指：你能在項目中從0到1打造應用的基礎設施、確定應用的工程化方案、實現應用構建和發布的流程、設計應用中的公共方法和底層架構。

只有系統地研究這些內容，開發者才能真正打通自身的“任督二脈”，實現個人和團隊價值的最大化。

我將上述內容總結定義為：前端工程化基建和架構設計。

這是每位開發者成長道路上的稀缺資源。

一輪又一輪的業務需求是煩瑣和機械的，但工程化基建和架構設計卻是萬丈高樓的根基，是巨型航母的引擎和發動機，是區分一般開發者和一流架構師的分水嶺。

因此，前端工程化基建和架構設計的價值對于個人、業務來說都是不言而喻的。

我理解的“前端工程化基建和架構設計”

我們知道，前端目前處在前所未有的地位高度：前端職場既快速發展著，也迎接著優勝劣汰；前端技術有著與生俱來的混亂，也有著與這種混亂抗衡的規范。

這些都給前端工程化基建帶來了更大的挑戰，對技術架構設計能力也提出了更高的要求。

對于實際業務來說，在前端工程化基建當中：

團隊作戰并非單打獨斗，那么如何設計工作流程，打造一個眾人皆贊的項目根基？
項目依賴紛繁復雜，如何做好依賴管理和公共庫管理？
如何深入理解框架，真正做到精通框架和準確拿捏技術選型？
從最基本的網絡請求庫說起，如何設計一個穩定靈活的多端Fetch庫？
如何借助Low Code或No Code技術，實現越來越智能的應用搭建方案？
如何統一中后臺項目架構，提升跨業務線的產研效率？
如何開發設計一套適合業務的組件庫，封裝分層樣式，最大限度做到復用，提升開發效率？
如何設計跨端方案，“Write Once，Run Everywhere”是否真的可行？
如何處理各種模塊化規范，以及精確做到代碼拆分？
如何區分開發邊界，比如前端如何更好地利用Node.js方案開疆擴土？

以上這些都直接決定了前端的業務價值，體現了前端團隊的技術能力。

那到底什么才是我理解的“前端工程化基建和架構設計”呢？

我以身邊常見的一些小事兒為例：不管是菜鳥還是經驗豐富的開發者，都有過被配置文件搞到焦頭爛額的時候，一不小心就引起命令行報錯，編譯不通過，終端上只顯示了短短幾行英文字母，卻都是warning和error。

也許你可以通過搜索引擎找到臨時解決方案，匆匆忙忙重新回到業務開發中追趕工期。但報錯的本源到底是什么，究竟什么是真正高效的解決方案？如果不深入探究，你很快還會因為類似的問題浪費大把時間，同時技術能力毫無提升。

再試想，對于開發時遇見的一些詭異問題，你也許會刪除一次node_moudles，并重新執行npm install命令，然后發現“重啟大法”有時候真能奇跡般地解決問題。可是你對其中的原理卻鮮有探究，也不清楚這是否是一種優雅的解決方案。

又或者，為了實現一個通用功能（也許就是為了找到一個函數參數的用法），你不得不翻看項目中的“屎山代碼”，浪費大把時間。可是面對歷史代碼，你卻完全不敢重構。經過日積月累，“歷史”逐漸成為“天坑”，“屎山代碼”成為業務桎梏。

基于多年對一線開發過程的觀察，以及對人才成長的思考，我心中的“前端工程化基建和架構設計”已不是簡單的思維模式輸出，不是“陽春白雪”的理論，也不是社區搜索即得的Webpack配置羅列和原理復述，而是從項目中的痛點提取基礎建設的意義，從個人發展瓶頸總結工程化架構和底層設計思想。

基于此，我的新書《前端架構師：基礎建設與架構設計思想》的內容呼之欲出。

圖書內容

事實上，前端工程化基建和架構設計相關話題在網上少之又少。

我幾乎翻遍了社區所有的相關課程和圖書，它們更多的是講解Webpack的配置和相關源碼，以及列舉npm基礎用法等。我一直在思考，什么樣的內容能夠幫助讀者突破“會用”的表層，從更高的視角看待問題。

本書包括五個部分，涵蓋30個主題（30篇），其中每一部分的內容簡介如下。

第一部分 ?前端工程化管理工具（01~05）
以npm和Yarn包管理工具切入工程化主題，通過Webpack和Vite構建工具加深讀者對工程化的理解。事實上，工具的背后是原理，因此我不會枯燥地列舉某個工具的優缺點和基本使用方式，而是會深入介紹幾個極具代表性的工具的技術原理和演變過程。只有吃透這些內容，才能真正理解工程化架構。希望通過這一部分，讀者能夠認識到如何刨根問底地學習，如何像一名架構師一樣思考。
第二部分 ?現代化前端開發和架構生態（06~16）
這部分將一網打盡大部分開發者每天都會接觸卻很少真正理解的知識點。希望通過第二部分，讀者能夠真正意識到，Webpack工程師的職責并不是寫寫配置文件那么簡單，Babel生態體系也不是使用AST技術玩轉編譯原理而已。這部分內容能夠幫助讀者培養前端工程化基礎建設思想，這也是設計一個公共庫、主導一項技術方案的基礎知識。
第三部分 ?核心框架原理與代碼設計模式（17~22）
在這一部分中，我們將一起來探索經典代碼的奧秘，體會設計模式和數據結構的藝術，請讀者結合業務實踐，思考優秀的設計思想如何在工作中落地。同時，我們會針對目前前端社區所流行的框架進行剖析，相信通過不斷學習經典思想和剖析源碼內容，各位讀者都能有新的收獲。
第四部分 ?前端架構設計實戰（23~26）
在這一部分中，我會一步一步帶領大家從0到1實現一個完整的應用項目或公共庫。這些工程實踐并不是社區上泛濫的Todo MVC，而是代表先進設計理念的現代化工程架構項目（比如設計實現前端+移動端離線包方案）。同時在這一部分中，我也會對編譯和構建、部署和發布這些熱門話題進行重點介紹。
第五部分 ?前端全鏈路——Node.js全棧開發（27~30）
在這一部分中，我們以實戰的方式靈活運用并實踐Node.js。這一部分不會講解Node.js的基礎內容，讀者需要先儲備相關知識。我們的重點會放在Node.js的應用和發展上，比如我會帶大家設計并完成一個真正意義上的企業級網關，其中涉及網絡知識、Node.js 理論知識、權限和代理知識等。再比如，我會帶大家研究并實現一個完善可靠的Node.js服務系統，它可能涉及異步消息隊列、數據存儲，以及微服務等傳統后端知識，讓讀者能夠真正在團隊項目中落地Node.js技術，不斷開疆擴土。

總之，這本書內容很多，干貨滿滿。

客觀來說，我絕不相信一本“武功秘籍”就能讓一個人一路打怪升級，一步登天。

我更想讓這本書成為一個促成你我交流的機會，在輸出自己經驗積累的同時，我希望它能幫助到每一個人。

你準備好了嗎？

來和我一起，像架構師一樣思考吧！