前端架構師：基礎建設與架構設計思想

快速發展的紅利、優勝劣汰的挑戰、與生俱來的混亂、同混亂抗衡的規範……這些都是前端從業者無法逃避的現狀。有人說，做好業務支撐是活在當下，而做好技術基建是活好未來。當業務量到達一定量級時，成為“規範制定者”，成為“思考者”，像“架構師”一樣思考問題，才能最終成為“優勝者”。本書內容不是簡單的思維模式輸出，不是純粹“陽春白雪”的理論，也不是社區搜索即得的 Webpack配置羅列和原理復述，而是從項目痛點中提取出的基礎建設的意義，以及從個人發展瓶頸中總結出的工程化架構和底層設計原理。本書不僅能幫助開發者夯實基礎，還能為開發者實現技術進階提供幫助和啟發。

目 錄 

第一部分 前端工程化管理工具 
01 安裝機制及企業級部署私服原理 ................................................................ 2 
npm 內部機制與核心原理 ...................................................................................................... 2 
npm 不完全指南 ...................................................................................................................... 6 
npm 多源鏡像和企業級部署私服原理 .................................................................................. 9 
總結 ........................................................................................................................................ 11
02 Yarn 安裝理念及依賴管理困境破解 .......................................................... 12 
Yarn 的安裝機制和背後思想 ................................................................................................ 14 
破解依賴管理困境 ................................................................................................................ 17 
總結 ........................................................................................................................................ 21
03 CI 環境下的 npm 優化及工程化問題解析 ................................................. 22 
CI 環境下的 npm 優化 .......................................................................................................... 22 
更多工程化相關問題解析 .................................................................................................... 23 
最佳實操建議 ........................................................................................................................ 30 
總結 ........................................................................................................................................ 31
04 主流構建工具的設計考量 ......................................................................... 32 
從 Tooling.Report 中，我們能學到什麼 .............................................................................. 32 
總結 ........................................................................................................................................ 36
05 Vite 實現：源碼分析與工程構建 ............................................................... 37 
Vite 的“橫空出世”............................................................................................................. 37
Vite 實現原理解讀 ................................................................................................................ 38
總結 ........................................................................................................................................ 50 

第二部分 現代化前端開發和架構生態 
06 談談 core-js 及 polyfill 理念 ...................................................................... 52 
core-js 工程一覽 .................................................................................................................... 52
如何復用一個 polyfill ........................................................................................................... 54
尋找最佳的 polyfill 方案 ...................................................................................................... 59
總結 ........................................................................................................................................ 62
07 梳理混亂的 Babel，拒絕編譯報錯 ............................................................ 63 
Babel 是什麼 .......................................................................................................................... 63
Babel Monorepo 架構包解析 ................................................................................................ 64
Babel 工程生態架構設計和分層理念 .................................................................................. 75
總結 ........................................................................................................................................ 78 
08 前端工具鏈：統一標準化的 babel-preset ................................................. 79 
從公共庫處理的問題，談如何做好“掃雷人” ................................................................. 79
應用項目構建和公共庫構建的差異 .................................................................................... 81
一個企業級公共庫的設計原則 ............................................................................................ 81
制定一個統一標準化的 babel-preset .................................................................................... 82 
總結 ........................................................................................................................................ 91
09 從 0 到 1 構建一個符合標準的公共庫 ....................................................... 92 
實戰打造一個公共庫 ............................................................................................................ 92 
打造公共庫，支持 script 標簽引入代碼 .............................................................................. 96 
打造公共庫，支持 Node.js 環境 ........................................................................................ 100 
從開源庫總結生態設計 ...................................................................................................... 103 
總結 ...................................................................................................................................... 104
10 代碼拆分與按需加載 .............................................................................. 105 
代碼拆分與按需加載的應用場景 ...................................................................................... 105 
代碼拆分與按需加載技術的實現 ...................................................................................... 106 
Webpack 賦能代碼拆分和按需加載 ................................................................................... 113 
總結 ...................................................................................................................................... 119
11 Tree Shaking：移除 JavaScript 上下文中的未引用代碼 ......................... 120 
Tree Shaking 必會理論 ........................................................................................................ 120 
前端工程化生態和 Tree Shaking 實踐 ............................................................................... 124 
總結 ...................................................................................................................................... 131 
12 理解 AST 實現和編譯原理 ...................................................................... 132 
AST 基礎知識 ..................................................................................................................... 132 
AST 實戰：實現一個簡易 Tree Shaking 腳本 ................................................................... 136 
總結 ...................................................................................................................................... 141
13 工程化思維：應用主題切換 .................................................................... 142 
設計一個主題切換工程架構 .............................................................................................. 142 
主題色切換架構實現 .......................................................................................................... 145 
總結 ...................................................................................................................................... 150
14 解析 Webpack 源碼，實現工具構建 ....................................................... 151 
Webpack 的初心和奧秘 ...................................................................................................... 151 
手動實現打包器 .................................................................................................................. 156 
總結 ...................................................................................................................................... 160
15 跨端解析小程式多端方案 ....................................................................... 161 
小程式多端方案概覽 .......................................................................................................... 161 
小程式多端——編譯時方案 ............................................................................................... 162 
小程式多端——運行時方案 ............................................................................................... 164 
小程式多端——類 React 風格的編譯時和運行時結合方案 ............................................ 166 
小程式多端方案的優化 ...................................................................................................... 176 
總結 ...................................................................................................................................... 178 
16 從移動端跨平臺到 Flutter 的技術變革 .................................................... 179 
移動端跨平臺技術原理和變遷 .......................................................................................... 179
Flutter 新貴背後的技術變革 ............................................................................................... 188
總結 ...................................................................................................................................... 194 

第三部分 核心框架原理與代碼設計模式 
17 axios：封裝一個結構清晰的 Fetch 庫 .................................................... 196 
設計請求庫需要考慮哪些問題 .......................................................................................... 196
axios 設計之美 ..................................................................................................................... 199
總結 ...................................................................................................................................... 206
18 對比 Koa 和 Redux：解析前端中間件 .................................................... 207 
以 Koa 為代表的 Node.js 中間件設計 ............................................................................... 207 
對比 Express，再談 Koa 中間件 ........................................................................................ 210 
Redux 中間件設計和實現 ................................................................................................... 213 
利用中間件思想，實現一個中間件化的 Fetch 庫 ............................................................ 215 
總結 ...................................................................................................................................... 218
19 軟體開發靈活性和高定製性 .................................................................... 219 
設計模式 .............................................................................................................................. 219
函數式思想應用 .................................................................................................................. 223
總結 ...................................................................................................................................... 227 
20 理解前端中的面向對象思想 .................................................................... 228 
實現 new 沒有那麼容易 ...................................................................................................... 228 
如何優雅地實現繼承 .......................................................................................................... 230 
jQuery 中的面向對象思想 .................................................................................................. 234 
類繼承和原型繼承的區別 .................................................................................................. 236 
總結 ...................................................................................................................................... 237
21 利用 JavaScript 實現經典數據結構 ........................................................ 238 
數據結構簡介 ...................................................................................................................... 238 
堆棧和隊列 .......................................................................................................................... 239
鏈表（單向鏈表和雙向鏈表） .......................................................................................... 241 
樹 .......................................................................................................................................... 247 
圖 .......................................................................................................................................... 251 
總結 ...................................................................................................................................... 255
22 剖析前端數據結構的應用場景 ................................................................ 256 
堆棧和隊列的應用 .............................................................................................................. 256 
鏈表的應用 .......................................................................................................................... 257
樹的應用 .............................................................................................................................. 260 
總結 ...................................................................................................................................... 263 

第四部分 前端架構設計實戰 
23 npm scripts：打造一體化構建和部署流程 .............................................. 266 
npm scripts 是什麼 ............................................................................................................... 266
npm scripts 原理 ................................................................................................................... 267
npm scripts 使用技巧 ........................................................................................................... 269
打造一個 lucas-scripts ......................................................................................................... 270
總結 ...................................................................................................................................... 276
24 自動化代碼檢查：剖析 Lint 工具 ............................................................ 277 
自動化工具 .......................................................................................................................... 277
lucas-scripts 中的 Lint 配置最佳實踐 ................................................................................. 281
工具背後的技術原理和設計 .............................................................................................. 283
總結 ...................................................................................................................................... 285
25 前端+移動端離線包方案設計 .................................................................. 286 
從流程圖分析 hybrid 性能痛點 .......................................................................................... 286
相應優化策略 ...................................................................................................................... 287
離線包方案 .......................................................................................................................... 289
方案持續優化 ...................................................................................................................... 293
總結 ...................................................................................................................................... 294 
26 設計一個“萬能”的項目腳手架 ............................................................ 295 
命令行工具的原理和實現 .................................................................................................. 295
從命令行到萬能腳手架 ...................................................................................................... 304
總結 ...................................................................................................................................... 306 

第五部分 前端全鏈路——Node.js 全棧開發 
27 同構渲染架構：實現 SSR 應用 .............................................................. 308 
實現一個簡易的 SSR 應用 ................................................................................................. 308
SSR 應用中容易忽略的細節 .............................................................................................. 312
總結 ...................................................................................................................................... 317
28 性能守衛系統設計：完善 CI/CD 流程 ..................................................... 318 
性能守衛理論基礎 .............................................................................................................. 318
Lighthouse 原理介紹 ........................................................................................................... 319
性能守衛系統 Perf-patronus ............................................................................................... 322
總結 ...................................................................................................................................... 328
29 打造網關：改造企業 BFF 方案 ............................................................... 329 
BFF 網關介紹和優缺點梳理 .............................................................................................. 329
打造 BFF 網關需要考慮的問題 ......................................................................................... 330
實現一個 lucas-gateway ...................................................................................................... 333
總結 ...................................................................................................................................... 340 
30 實現高可用：Puppeteer 實戰 ................................................................. 341 
Puppeteer 簡介和原理 ......................................................................................................... 341 
Puppeteer 在 SSR 中的應用 ................................................................................................ 342 
Puppeteer 在 UI 測試中的應用 ........................................................................................... 345 
Puppeteer 結合 Lighthouse 的應用場景 ............................................................................. 345 
通過 Puppeteer 實現海報 Node.js 服務 .............................................................................. 347 
總結 ...............................................................................................................................353