關于我們
書單推薦
新書推薦
|
前端架構師:基礎建設與架構設計思想 讀者對象:想要加深前端基礎建設能力的開發(fā)者;想要培養(yǎng)前端架構思維的開發(fā)者及從業(yè)者。
快速發(fā)展的紅利、優(yōu)勝劣汰的挑戰(zhàn)、與生俱來的混亂、同混亂抗衡的規(guī)范……這些都是前端從業(yè)者無法逃避的現(xiàn)狀。有人說,做好業(yè)務支撐是活在當下,而做好技術基建是活好未來。當業(yè)務量到達一定量級時,成為“規(guī)范制定者”,成為“思考者”,像“架構師”一樣思考問題,才能最終成為“優(yōu)勝者”。本書內(nèi)容不是簡單的思維模式輸出,不是純粹“陽春白雪”的理論,也不是社區(qū)搜索即得的 Webpack配置羅列和原理復述,而是從項目痛點中提取出的基礎建設的意義,以及從個人發(fā)展瓶頸中總結出的工程化架構和底層設計原理。本書不僅能幫助開發(fā)者夯實基礎,還能為開發(fā)者實現(xiàn)技術進階提供幫助和啟發(fā)。
侯策,就職于某內(nèi)容社區(qū)類互聯(lián)網(wǎng)上市公司,具有多年海內(nèi)外工作經(jīng)驗,曾先后就職于法國ENGIE集團、Google、百度等知名企業(yè)。擅長前端工程化體系搭建及基礎建設架構設計。深入了解前端各類技術框架和相關技術棧,具有豐富的高流量產(chǎn)品穩(wěn)定性建設及性能和用戶體驗優(yōu)化經(jīng)驗,在業(yè)務提效和質量保障方面亦有深厚積累,在跨端開發(fā)(包括小程序矩陣開發(fā))、富文本編輯器、Node.js、React等技術方向有較強的業(yè)內(nèi)影響力。在技術氛圍打造、團隊成員培養(yǎng)、技術體系建設、新技術落地、難點攻堅、歷史包袱重構等方面均有豐富的實踐經(jīng)歷。著有《React狀態(tài)管理與同構實踐》《前端開發(fā)核心知識進階:從夯實基礎到突破瓶頸》等多部技術圖書?赏ㄟ^知乎社區(qū)聯(lián)系作者:Lucas HC
目 錄
第一部分 前端工程化管理工具 01 安裝機制及企業(yè)級部署私服原理 ................................................................ 2 npm 內(nèi)部機制與核心原理 ...................................................................................................... 2 npm 不完全指南 ...................................................................................................................... 6 npm 多源鏡像和企業(yè)級部署私服原理 .................................................................................. 9 總結 ........................................................................................................................................ 11 02 Yarn 安裝理念及依賴管理困境破解 .......................................................... 12 Yarn 的安裝機制和背后思想 ................................................................................................ 14 破解依賴管理困境 ................................................................................................................ 17 總結 ........................................................................................................................................ 21 03 CI 環(huán)境下的 npm 優(yōu)化及工程化問題解析 ................................................. 22 CI 環(huán)境下的 npm 優(yōu)化 .......................................................................................................... 22 更多工程化相關問題解析 .................................................................................................... 23 最佳實操建議 ........................................................................................................................ 30 總結 ........................................................................................................................................ 31 04 主流構建工具的設計考量 ......................................................................... 32 從 Tooling.Report 中,我們能學到什么 .............................................................................. 32 總結 ........................................................................................................................................ 36 05 Vite 實現(xiàn):源碼分析與工程構建 ............................................................... 37 Vite 的“橫空出世”............................................................................................................. 37 Vite 實現(xiàn)原理解讀 ................................................................................................................ 38 總結 ........................................................................................................................................ 50 第二部分 現(xiàn)代化前端開發(fā)和架構生態(tài) 06 談談 core-js 及 polyfill 理念 ...................................................................... 52 core-js 工程一覽 .................................................................................................................... 52 如何復用一個 polyfill ........................................................................................................... 54 尋找最佳的 polyfill 方案 ...................................................................................................... 59 總結 ........................................................................................................................................ 62 07 梳理混亂的 Babel,拒絕編譯報錯 ............................................................ 63 Babel 是什么 .......................................................................................................................... 63 Babel Monorepo 架構包解析 ................................................................................................ 64 Babel 工程生態(tài)架構設計和分層理念 .................................................................................. 75 總結 ........................................................................................................................................ 78 08 前端工具鏈:統(tǒng)一標準化的 babel-preset ................................................. 79 從公共庫處理的問題,談如何做好“掃雷人” ................................................................. 79 應用項目構建和公共庫構建的差異 .................................................................................... 81 一個企業(yè)級公共庫的設計原則 ............................................................................................ 81 制定一個統(tǒng)一標準化的 babel-preset .................................................................................... 82 總結 ........................................................................................................................................ 91 09 從 0 到 1 構建一個符合標準的公共庫 ....................................................... 92 實戰(zhàn)打造一個公共庫 ............................................................................................................ 92 打造公共庫,支持 script 標簽引入代碼 .............................................................................. 96 打造公共庫,支持 Node.js 環(huán)境 ........................................................................................ 100 從開源庫總結生態(tài)設計 ...................................................................................................... 103 總結 ...................................................................................................................................... 104 10 代碼拆分與按需加載 .............................................................................. 105 代碼拆分與按需加載的應用場景 ...................................................................................... 105 代碼拆分與按需加載技術的實現(xiàn) ...................................................................................... 106 Webpack 賦能代碼拆分和按需加載 ................................................................................... 113 總結 ...................................................................................................................................... 119 11 Tree Shaking:移除 JavaScript 上下文中的未引用代碼 ......................... 120 Tree Shaking 必會理論 ........................................................................................................ 120 前端工程化生態(tài)和 Tree Shaking 實踐 ............................................................................... 124 總結 ...................................................................................................................................... 131 12 理解 AST 實現(xiàn)和編譯原理 ...................................................................... 132 AST 基礎知識 ..................................................................................................................... 132 AST 實戰(zhàn):實現(xiàn)一個簡易 Tree Shaking 腳本 ................................................................... 136 總結 ...................................................................................................................................... 141 13 工程化思維:應用主題切換 .................................................................... 142 設計一個主題切換工程架構 .............................................................................................. 142 主題色切換架構實現(xiàn) .......................................................................................................... 145 總結 ...................................................................................................................................... 150 14 解析 Webpack 源碼,實現(xiàn)工具構建 ....................................................... 151 Webpack 的初心和奧秘 ...................................................................................................... 151 手動實現(xiàn)打包器 .................................................................................................................. 156 總結 ...................................................................................................................................... 160 15 跨端解析小程序多端方案 ....................................................................... 161 小程序多端方案概覽 .......................................................................................................... 161 小程序多端——編譯時方案 ............................................................................................... 162 小程序多端——運行時方案 ............................................................................................... 164 小程序多端——類 React 風格的編譯時和運行時結合方案 ............................................ 166 小程序多端方案的優(yōu)化 ...................................................................................................... 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 中間件設計和實現(xiàn) ................................................................................................... 213 利用中間件思想,實現(xiàn)一個中間件化的 Fetch 庫 ............................................................ 215 總結 ...................................................................................................................................... 218 19 軟件開發(fā)靈活性和高定制性 .................................................................... 219 設計模式 .............................................................................................................................. 219 函數(shù)式思想應用 .................................................................................................................. 223 總結 ...................................................................................................................................... 227 20 理解前端中的面向對象思想 .................................................................... 228 實現(xiàn) new 沒有那么容易 ...................................................................................................... 228 如何優(yōu)雅地實現(xiàn)繼承 .......................................................................................................... 230 jQuery 中的面向對象思想 .................................................................................................. 234 類繼承和原型繼承的區(qū)別 .................................................................................................. 236 總結 ...................................................................................................................................... 237 21 利用 JavaScript 實現(xiàn)經(jīng)典數(shù)據(jù)結構 ........................................................ 238 數(shù)據(jù)結構簡介 ...................................................................................................................... 238 堆棧和隊列 .......................................................................................................................... 239 鏈表(單向鏈表和雙向鏈表) .......................................................................................... 241 樹 .......................................................................................................................................... 247 圖 .......................................................................................................................................... 251 總結 ...................................................................................................................................... 255 22 剖析前端數(shù)據(jù)結構的應用場景 ................................................................ 256 堆棧和隊列的應用 .............................................................................................................. 256 鏈表的應用 .......................................................................................................................... 257 樹的應用 .............................................................................................................................. 260 總結 ...................................................................................................................................... 263 第四部分 前端架構設計實戰(zhàn) 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 相應優(yōu)化策略 ...................................................................................................................... 287 離線包方案 .......................................................................................................................... 289 方案持續(xù)優(yōu)化 ...................................................................................................................... 293 總結 ...................................................................................................................................... 294 26 設計一個“萬能”的項目腳手架 ............................................................ 295 命令行工具的原理和實現(xiàn) .................................................................................................. 295 從命令行到萬能腳手架 ...................................................................................................... 304 總結 ...................................................................................................................................... 306 第五部分 前端全鏈路——Node.js 全棧開發(fā) 27 同構渲染架構:實現(xiàn) SSR 應用 .............................................................. 308 實現(xiàn)一個簡易的 SSR 應用 ................................................................................................. 308 SSR 應用中容易忽略的細節(jié) .............................................................................................. 312 總結 ...................................................................................................................................... 317 28 性能守衛(wèi)系統(tǒng)設計:完善 CI/CD 流程 ..................................................... 318 性能守衛(wèi)理論基礎 .............................................................................................................. 318 Lighthouse 原理介紹 ........................................................................................................... 319 性能守衛(wèi)系統(tǒng) Perf-patronus ............................................................................................... 322 總結 ...................................................................................................................................... 328 29 打造網(wǎng)關:改造企業(yè) BFF 方案 ............................................................... 329 BFF 網(wǎng)關介紹和優(yōu)缺點梳理 .............................................................................................. 329 打造 BFF 網(wǎng)關需要考慮的問題 ......................................................................................... 330 實現(xiàn)一個 lucas-gateway ...................................................................................................... 333 總結 ...................................................................................................................................... 340 30 實現(xiàn)高可用:Puppeteer 實戰(zhàn) ................................................................. 341 Puppeteer 簡介和原理 ......................................................................................................... 341 Puppeteer 在 SSR 中的應用 ................................................................................................ 342 Puppeteer 在 UI 測試中的應用 ........................................................................................... 345 Puppeteer 結合 Lighthouse 的應用場景 ............................................................................. 345 通過 Puppeteer 實現(xiàn)海報 Node.js 服務 .............................................................................. 347 總結 ...............................................................................................................................353
你還可能感興趣
我要評論
|