鏈接：https://pan.baidu.com/s/1FCTo6JmKY3Ljqiu0gDCrsw?pwd=rvi1?

提取碼：rvi1

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

目 錄?

第一部分 前端工程化管理工具?

01 安裝機制及企業(yè)級部署私服原理 ................................................................ 2?

npm 內(nèi)部機制與核心原理 ...................................................................................................... 2?

npm 不完全指南 ...................................................................................................................... 6?

npm 多源鏡像和企業(yè)級部署私服原理 .................................................................................. 9?

總結(jié) ........................................................................................................................................ 11

02 Yarn 安裝理念及依賴管理困境破解 .......................................................... 12?

Yarn 的安裝機制和背后思想 ................................................................................................ 14?

破解依賴管理困境 ................................................................................................................ 17?

總結(jié) ........................................................................................................................................ 21

03 CI 環(huán)境下的 npm 優(yōu)化及工程化問題解析 ................................................. 22?

CI 環(huán)境下的 npm 優(yōu)化 .......................................................................................................... 22?

更多工程化相關問題解析 .................................................................................................... 23?

最佳實操建議 ........................................................................................................................ 30?

總結(jié) ........................................................................................................................................ 31

04 主流構(gòu)建工具的設計考量 ......................................................................... 32?

從 Tooling.Report 中，我們能學到什么 .............................................................................. 32?

總結(jié) ........................................................................................................................................ 36

05 Vite 實現(xiàn)：源碼分析與工程構(gòu)建 ............................................................... 37?

Vite 的“橫空出世”............................................................................................................. 37

Vite 實現(xiàn)原理解讀 ................................................................................................................ 38

總結(jié) ........................................................................................................................................ 50?

第二部分 現(xiàn)代化前端開發(fā)和架構(gòu)生態(tài)?

06 談談 core-js 及 polyfill 理念 ...................................................................... 52?

core-js 工程一覽 .................................................................................................................... 52

如何復用一個 polyfill ........................................................................................................... 54

尋找最佳的 polyfill 方案 ...................................................................................................... 59

總結(jié) ........................................................................................................................................ 62

07 梳理混亂的 Babel，拒絕編譯報錯 ............................................................ 63?

Babel 是什么 .......................................................................................................................... 63

Babel Monorepo 架構(gòu)包解析 ................................................................................................ 64

Babel 工程生態(tài)架構(gòu)設計和分層理念 .................................................................................. 75

總結(jié) ........................................................................................................................................ 78?

08 前端工具鏈：統(tǒng)一標準化的 babel-preset ................................................. 79?

從公共庫處理的問題，談如何做好“掃雷人” ................................................................. 79

應用項目構(gòu)建和公共庫構(gòu)建的差異 .................................................................................... 81

一個企業(yè)級公共庫的設計原則 ............................................................................................ 81

制定一個統(tǒng)一標準化的 babel-preset .................................................................................... 82?

總結(jié) ........................................................................................................................................ 91

09 從 0 到 1 構(gòu)建一個符合標準的公共庫 ....................................................... 92?

實戰(zhàn)打造一個公共庫 ............................................................................................................ 92?

打造公共庫，支持 script 標簽引入代碼 .............................................................................. 96?

打造公共庫，支持 Node.js 環(huán)境 ........................................................................................ 100?

從開源庫總結(jié)生態(tài)設計 ...................................................................................................... 103?

總結(jié) ...................................................................................................................................... 104

10 代碼拆分與按需加載 .............................................................................. 105?

代碼拆分與按需加載的應用場景 ...................................................................................... 105?

代碼拆分與按需加載技術(shù)的實現(xiàn) ...................................................................................... 106?

Webpack 賦能代碼拆分和按需加載 ................................................................................... 113?

總結(jié) ...................................................................................................................................... 119

11 Tree Shaking：移除 JavaScript 上下文中的未引用代碼 ......................... 120?

Tree Shaking 必會理論 ........................................................................................................ 120?

前端工程化生態(tài)和 Tree Shaking 實踐 ............................................................................... 124?

總結(jié) ...................................................................................................................................... 131?

12 理解 AST 實現(xiàn)和編譯原理 ...................................................................... 132?

AST 基礎知識 ..................................................................................................................... 132?

AST 實戰(zhàn)：實現(xiàn)一個簡易 Tree Shaking 腳本 ................................................................... 136?

總結(jié) ...................................................................................................................................... 141

13 工程化思維：應用主題切換 .................................................................... 142?

設計一個主題切換工程架構(gòu) .............................................................................................. 142?

主題色切換架構(gòu)實現(xiàn) .......................................................................................................... 145?

總結(jié) ...................................................................................................................................... 150

14 解析 Webpack 源碼，實現(xiàn)工具構(gòu)建 ....................................................... 151?

Webpack 的初心和奧秘 ...................................................................................................... 151?

手動實現(xiàn)打包器 .................................................................................................................. 156?

總結(jié) ...................................................................................................................................... 160

15 跨端解析小程序多端方案 ....................................................................... 161?

小程序多端方案概覽 .......................................................................................................... 161?

小程序多端——編譯時方案 ............................................................................................... 162?

小程序多端——運行時方案 ............................................................................................... 164?

小程序多端——類 React 風格的編譯時和運行時結(jié)合方案 ............................................ 166?

小程序多端方案的優(yōu)化 ...................................................................................................... 176?

總結(jié) ...................................................................................................................................... 178?

16 從移動端跨平臺到 Flutter 的技術(shù)變革 .................................................... 179?

移動端跨平臺技術(shù)原理和變遷 .......................................................................................... 179

Flutter 新貴背后的技術(shù)變革 ............................................................................................... 188

總結(jié) ...................................................................................................................................... 194?

第三部分 核心框架原理與代碼設計模式?

17 axios：封裝一個結(jié)構(gòu)清晰的 Fetch 庫 .................................................... 196?

設計請求庫需要考慮哪些問題 .......................................................................................... 196

axios 設計之美 ..................................................................................................................... 199

總結(jié) ...................................................................................................................................... 206

18 對比 Koa 和 Redux：解析前端中間件 .................................................... 207?

以 Koa 為代表的 Node.js 中間件設計 ............................................................................... 207?

對比 Express，再談 Koa 中間件 ........................................................................................ 210?

Redux 中間件設計和實現(xiàn) ................................................................................................... 213?

利用中間件思想，實現(xiàn)一個中間件化的 Fetch 庫 ............................................................ 215?

總結(jié) ...................................................................................................................................... 218

19 軟件開發(fā)靈活性和高定制性 .................................................................... 219?

設計模式 .............................................................................................................................. 219

函數(shù)式思想應用 .................................................................................................................. 223

總結(jié) ...................................................................................................................................... 227?

20 理解前端中的面向?qū)ο笏枷?.................................................................... 228?

實現(xiàn) new 沒有那么容易 ...................................................................................................... 228?

如何優(yōu)雅地實現(xiàn)繼承 .......................................................................................................... 230?

jQuery 中的面向?qū)ο笏枷?.................................................................................................. 234?

類繼承和原型繼承的區(qū)別 .................................................................................................. 236?

總結(jié) ...................................................................................................................................... 237

21 利用 JavaScript 實現(xiàn)經(jīng)典數(shù)據(jù)結(jié)構(gòu) ........................................................ 238?

數(shù)據(jù)結(jié)構(gòu)簡介 ...................................................................................................................... 238?

堆棧和隊列 .......................................................................................................................... 239

鏈表（單向鏈表和雙向鏈表） .......................................................................................... 241?

樹 .......................................................................................................................................... 247?

圖 .......................................................................................................................................... 251?

總結(jié) ...................................................................................................................................... 255

22 剖析前端數(shù)據(jù)結(jié)構(gòu)的應用場景 ................................................................ 256?

堆棧和隊列的應用 .............................................................................................................. 256?

鏈表的應用 .......................................................................................................................... 257

樹的應用 .............................................................................................................................. 260?

總結(jié) ...................................................................................................................................... 263?

第四部分 前端架構(gòu)設計實戰(zhàn)?

23 npm scripts：打造一體化構(gòu)建和部署流程 .............................................. 266?

npm scripts 是什么 ............................................................................................................... 266

npm scripts 原理 ................................................................................................................... 267

npm scripts 使用技巧 ........................................................................................................... 269

打造一個 lucas-scripts ......................................................................................................... 270

總結(jié) ...................................................................................................................................... 276

24 自動化代碼檢查：剖析 Lint 工具 ............................................................ 277?

自動化工具 .......................................................................................................................... 277

lucas-scripts 中的 Lint 配置最佳實踐 ................................................................................. 281

工具背后的技術(shù)原理和設計 .............................................................................................. 283

總結(jié) ...................................................................................................................................... 285

25 前端+移動端離線包方案設計 .................................................................. 286?

從流程圖分析 hybrid 性能痛點 .......................................................................................... 286

相應優(yōu)化策略 ...................................................................................................................... 287

離線包方案 .......................................................................................................................... 289

方案持續(xù)優(yōu)化 ...................................................................................................................... 293

總結(jié) ...................................................................................................................................... 294?

26 設計一個“萬能”的項目腳手架 ............................................................ 295?

命令行工具的原理和實現(xiàn) .................................................................................................. 295

從命令行到萬能腳手架 ...................................................................................................... 304

總結(jié) ...................................................................................................................................... 306?

第五部分 前端全鏈路——Node.js 全棧開發(fā)?

27 同構(gòu)渲染架構(gòu)：實現(xiàn) SSR 應用 .............................................................. 308?

實現(xiàn)一個簡易的 SSR 應用 ................................................................................................. 308

SSR 應用中容易忽略的細節(jié) .............................................................................................. 312

總結(jié) ...................................................................................................................................... 317

28 性能守衛(wèi)系統(tǒng)設計：完善 CI/CD 流程 ..................................................... 318?

性能守衛(wèi)理論基礎 .............................................................................................................. 318

Lighthouse 原理介紹 ........................................................................................................... 319

性能守衛(wèi)系統(tǒng) Perf-patronus ............................................................................................... 322

總結(jié) ...................................................................................................................................... 328

29 打造網(wǎng)關：改造企業(yè) BFF 方案 ............................................................... 329?

BFF 網(wǎng)關介紹和優(yōu)缺點梳理 .............................................................................................. 329

打造 BFF 網(wǎng)關需要考慮的問題 ......................................................................................... 330

實現(xiàn)一個 lucas-gateway ...................................................................................................... 333

總結(jié) ...................................................................................................................................... 340?

30 實現(xiàn)高可用：Puppeteer 實戰(zhàn) ................................................................. 341?

Puppeteer 簡介和原理 ......................................................................................................... 341?

Puppeteer 在 SSR 中的應用 ................................................................................................ 342?

Puppeteer 在 UI 測試中的應用 ........................................................................................... 345?

Puppeteer 結(jié)合 Lighthouse 的應用場景 ............................................................................. 345?

通過 Puppeteer 實現(xiàn)海報 Node.js 服務 .............................................................................. 347?

總結(jié) ...............................................................................................................................353