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

提取碼：rvi1

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

目 錄?

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

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

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

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

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

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

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

Yarn 的安裝機(jī)制和背后思想 ................................................................................................ 14?

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

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

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

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

更多工程化相關(guān)問題解析 .................................................................................................... 23?

最佳實(shí)操建議 ........................................................................................................................ 30?

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

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

從 Tooling.Report 中，我們能學(xué)到什么 .............................................................................. 32?

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

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

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

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

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

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

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

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

如何復(fù)用一個(gè) polyfill ........................................................................................................... 54

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

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

07 梳理混亂的 Babel，拒絕編譯報(bào)錯(cuò) ............................................................ 63?

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

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

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

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

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

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

應(yīng)用項(xiàng)目構(gòu)建和公共庫(kù)構(gòu)建的差異 .................................................................................... 81

一個(gè)企業(yè)級(jí)公共庫(kù)的設(shè)計(jì)原則 ............................................................................................ 81

制定一個(gè)統(tǒng)一標(biāo)準(zhǔn)化的 babel-preset .................................................................................... 82?

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

09 從 0 到 1 構(gòu)建一個(gè)符合標(biāo)準(zhǔn)的公共庫(kù) ....................................................... 92?

實(shí)戰(zhàn)打造一個(gè)公共庫(kù) ............................................................................................................ 92?

打造公共庫(kù)，支持 script 標(biāo)簽引入代碼 .............................................................................. 96?

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

從開源庫(kù)總結(jié)生態(tài)設(shè)計(jì) ...................................................................................................... 103?

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

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

代碼拆分與按需加載的應(yīng)用場(chǎng)景 ...................................................................................... 105?

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

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

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

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

Tree Shaking 必會(huì)理論 ........................................................................................................ 120?

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

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

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

AST 基礎(chǔ)知識(shí) ..................................................................................................................... 132?

AST 實(shí)戰(zhàn)：實(shí)現(xiàn)一個(gè)簡(jiǎn)易 Tree Shaking 腳本 ................................................................... 136?

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

13 工程化思維：應(yīng)用主題切換 .................................................................... 142?

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

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

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

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

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

手動(dòng)實(shí)現(xiàn)打包器 .................................................................................................................. 156?

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

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

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

小程序多端——編譯時(shí)方案 ............................................................................................... 162?

小程序多端——運(yùn)行時(shí)方案 ............................................................................................... 164?

小程序多端——類 React 風(fēng)格的編譯時(shí)和運(yùn)行時(shí)結(jié)合方案 ............................................ 166?

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

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

16 從移動(dòng)端跨平臺(tái)到 Flutter 的技術(shù)變革 .................................................... 179?

移動(dòng)端跨平臺(tái)技術(shù)原理和變遷 .......................................................................................... 179

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

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

第三部分 核心框架原理與代碼設(shè)計(jì)模式?

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

設(shè)計(jì)請(qǐng)求庫(kù)需要考慮哪些問題 .......................................................................................... 196

axios 設(shè)計(jì)之美 ..................................................................................................................... 199

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

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

以 Koa 為代表的 Node.js 中間件設(shè)計(jì) ............................................................................... 207?

對(duì)比 Express，再談 Koa 中間件 ........................................................................................ 210?

Redux 中間件設(shè)計(jì)和實(shí)現(xiàn) ................................................................................................... 213?

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

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

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

設(shè)計(jì)模式 .............................................................................................................................. 219

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

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

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

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

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

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

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

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

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

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

堆棧和隊(duì)列 .......................................................................................................................... 239

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

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

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

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

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

堆棧和隊(duì)列的應(yīng)用 .............................................................................................................. 256?

鏈表的應(yīng)用 .......................................................................................................................... 257

樹的應(yīng)用 .............................................................................................................................. 260?

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

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

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

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

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

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

打造一個(gè) lucas-scripts ......................................................................................................... 270

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

24 自動(dòng)化代碼檢查：剖析 Lint 工具 ............................................................ 277?

自動(dòng)化工具 .......................................................................................................................... 277

lucas-scripts 中的 Lint 配置最佳實(shí)踐 ................................................................................. 281

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

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

25 前端+移動(dòng)端離線包方案設(shè)計(jì) .................................................................. 286?

從流程圖分析 hybrid 性能痛點(diǎn) .......................................................................................... 286

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

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

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

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

26 設(shè)計(jì)一個(gè)“萬(wàn)能”的項(xiàng)目腳手架 ............................................................ 295?

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

從命令行到萬(wàn)能腳手架 ...................................................................................................... 304

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

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

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

實(shí)現(xiàn)一個(gè)簡(jiǎn)易的 SSR 應(yīng)用 ................................................................................................. 308

SSR 應(yīng)用中容易忽略的細(xì)節(jié) .............................................................................................. 312

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

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

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

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

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

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

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

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

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

實(shí)現(xiàn)一個(gè) lucas-gateway ...................................................................................................... 333

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

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

Puppeteer 簡(jiǎn)介和原理 ......................................................................................................... 341?

Puppeteer 在 SSR 中的應(yīng)用 ................................................................................................ 342?

Puppeteer 在 UI 測(cè)試中的應(yīng)用 ........................................................................................... 345?

Puppeteer 結(jié)合 Lighthouse 的應(yīng)用場(chǎng)景 ............................................................................. 345?

通過 Puppeteer 實(shí)現(xiàn)海報(bào) Node.js 服務(wù) .............................................................................. 347?

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