|
|
|
快速發展的紅利、優勝劣汰的挑戰、與生俱來的混亂、同混亂抗衡的規範……這些都是前端從業者無法逃避的現狀。有人說，做好業務支撐是活在當下，而做好技術基建是活好未來。
當業務量到達一定量級時，成為“規範制定者”，成為“思考者”，像“架構師”一樣思考問題，才能最終成為“優勝者”。
本書內容不是簡單的思維模式輸出，不是純粹“陽春白雪”的理論，也不是社區搜索即得的 Webpack配置羅列和原理複述，而是從項目痛點中提取出的基礎建設的意義，以及從個人發展瓶頸中總結出的工程化架構和底層設計原理。
本書不僅能幫助開發者夯實基礎，還能為開發者實現技術進階提供幫助和啟發。
侯策
就職於某內容社區類互聯網上市公司，具有多年海內外工作經驗，曾先後就職於法國ENGIE集團、Google、百度等知名企業。擅長前端工程化體系搭建及基礎建設架構設計。深入瞭解前端各類技術框架和相關技術棧，具有豐富的高流量產品穩定性建設及性能和使用者體驗優化經驗，在業務提效和品質保障方面亦有深厚積累，在跨端開發（包括小程式矩陣開發）、富文字編輯器、Node.js、React等技術方向有較強的業內影響力。在技術氛圍打造、團隊成員培養、技術體系建設、新技術落地、難點攻堅、歷史包袱重構等方面均有豐富的實踐經歷。著有《React狀態管理與同構實踐》《前端開發核心知識進階：從夯實基礎到突破瓶頸》等多部技術圖書。"
第一部分前端工程化管理工具
01安裝機制及企業級部署私服原理2
npm內部機制與核心原理2
npm不接近指南6
npm多源鏡像和企業級部署私服原理9
總結11
02Yarn安裝理念及依賴管理困境破解12
Yarn的安裝機制和背後思想14
破解依賴管理困境17
總結21
03CI環境下的npm優化及工程化問題解析22
CI環境下的npm優化22
更多工程化相關問題解析23
很好實操建議30
總結31
04主流構建工具的設計考量32
從ToolingReport中，我們能學到什麼32
總結36
05Vite實現：源碼分析與工程構建37
Vite的“橫空出世”37
Vite實現原理解讀38
總結50
第二部分現代化前端開發和架構生態
06談談core-js及polyfill理念52
core-js工程一覽52
如何複用一個polyfill54
尋找很好的polyfill方案59
總結62
07梳理混亂的Babel，拒絕編譯報錯63
Babel是什麼63
BabelMonorepo架構包解析64
Babel工程生態架構設計和分層理念75
總結78
08前端工具鏈：統一標準化的babel-preset79
從公共庫處理的問題，談如何做好“掃雷人”79
應用專案構建和公共庫構建的差異81
一個企業級公共庫的設計原則81
制定一個統一標準化的babel-preset82
總結91
09從0到1構建一個符合標準的公共庫92
實戰打造一個公共庫92
打造公共庫，支持標籤引入代碼96
打造公共庫，支援Nodejs環境100
從開源庫總結生態設計103
總結104
10代碼拆分與按需載入105
代碼拆分與按需載入的應用場景105
代碼拆分與按需載入技術的實現106
Webpack賦能代碼拆分和按需載入113
總結119
11TreeShaking：移除JavaScript上下文中的未引用代碼120
TreeShaking必會理論120
前端工程化生態和TreeShaking實踐124
總結131
12理解AST實現和編譯原理132
AST基礎知識132
AST實戰：實現一個簡易TreeShaking腳本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
第三部分核心框架原理與代碼設計模式
17axios：封裝一個結構清晰的Fetch庫196
設計請求庫需要考慮哪些問題196
axios設計之美199
總結206
18對比Koa和Redux：解析前端中介軟體207
以Koa為代表的Nodejs中介軟體設計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
第四部分前端架構設計實戰
23npms：打造一體化構建和部署流程266
npms是什麼266
npms原理267
npms使用技巧269
打造一個lucas-s270
總結276
24自動化代碼檢查：剖析Lint工具277
自動化工具277
lucas-s中的Lint配置很好實踐281
工具背後的技術原理和設計283
總結285
25前端+移動端離線包方案設計286
從流程圖分析hybrid性能痛點286
相應優化策略287
離線包方案289
方案持續優化293
總結294
26設計一個“萬能”的專案腳手架295
命令列工具的原理和實現295
從命令列到萬能腳手架304
總結306
第五部分前端全鏈路――Nodejs全棧開發
27同構渲染架構：實現SSR應用308
實現一個簡易的SSR應用308
SSR應用中容易忽略的細節312
總結317
28性能守衛系統設計：完善CI/CD流程318
性能守衛理論基礎318
Lighthouse原理介紹319
性能守衛系統Perf-patronus322
總結328
29打造閘道：改造企業BFF方案329
BFF閘道介紹和優缺點梳理329
打造BFF閘道需要考慮的問題330
實現一個lucas-gateway333
總結340
30實現高可用：Puppeteer實戰341
Puppeteer簡介和原理341
Puppeteer在SSR中的應用342
Puppeteer在UI測試中的應用345
Puppeteer結合Lighthouse的應用場景345
通過Puppeteer實現海報Nodejs服務347
總結353
