|
關(guān)于我們
 書單推薦 新書推薦 |
前端架構(gòu)師：基礎(chǔ)建設(shè)與架構(gòu)設(shè)計(jì)思想 
定 價(jià)：108 元
9 7 4 8 3 7 9 1 8 2 2 1 7 讀者對象:想要加深前端基礎(chǔ)建設(shè)能力的開發(fā)者；想要培養(yǎng)前端架構(gòu)思維的開發(fā)者及從業(yè)者。 
快速發(fā)展的紅利、優(yōu)勝劣汰的挑戰(zhàn)、與生俱來的混亂、同混亂抗衡的規(guī)范……這些都是前端從業(yè)者無法逃避的現(xiàn)狀。有人說，做好業(yè)務(wù)支撐是活在當(dāng)下，而做好技術(shù)基建是活好未來。當(dāng)業(yè)務(wù)量到達(dá)一定量級時，成為“規(guī)范制定者”，成為“思考者”，像“架構(gòu)師”一樣思考問題，才能最終成為“優(yōu)勝者”。本書內(nèi)容不是簡單的思維模式輸出，不是純粹“陽春白雪”的理論，也不是社區(qū)搜索即得的 Webpack配置羅列和原理復(fù)述，而是從項(xiàng)目痛點(diǎn)中提取出的基礎(chǔ)建設(shè)的意義，以及從個人發(fā)展瓶頸中總結(jié)出的工程化架構(gòu)和底層設(shè)計(jì)原理。本書不僅能幫助開發(fā)者夯實(shí)基礎(chǔ)，還能為開發(fā)者實(shí)現(xiàn)技術(shù)進(jìn)階提供幫助和啟發(fā)。
侯策，就職于某內(nèi)容社區(qū)類互聯(lián)網(wǎng)上市公司，具有多年海內(nèi)外工作經(jīng)驗(yàn)，曾先后就職于法國ENGIE集團(tuán)、Google、百度等知名企業(yè)。擅長前端工程化體系搭建及基礎(chǔ)建設(shè)架構(gòu)設(shè)計(jì)。深入了解前端各類技術(shù)框架和相關(guān)技術(shù)棧，具有豐富的高流量產(chǎn)品穩(wěn)定性建設(shè)及性能和用戶體驗(yàn)優(yōu)化經(jīng)驗(yàn)，在業(yè)務(wù)提效和質(zhì)量保障方面亦有深厚積累，在跨端開發(fā)（包括小程序矩陣開發(fā)）、富文本編輯器、Node.js、React等技術(shù)方向有較強(qiáng)的業(yè)內(nèi)影響力。在技術(shù)氛圍打造、團(tuán)隊(duì)成員培養(yǎng)、技術(shù)體系建設(shè)、新技術(shù)落地、難點(diǎn)攻堅(jiān)、歷史包袱重構(gòu)等方面均有豐富的實(shí)踐經(jīng)歷。著有《React狀態(tài)管理與同構(gòu)實(shí)踐》《前端開發(fā)核心知識進(jìn)階：從夯實(shí)基礎(chǔ)到突破瓶頸》等多部技術(shù)圖書�？赏ㄟ^知乎社區(qū)聯(lián)系作者：Lucas HC
目 錄
第一部分 前端工程化管理工具 01 安裝機(jī)制及企業(yè)級部署私服原理 ................................................................ 2 npm 內(nèi)部機(jī)制與核心原理 ...................................................................................................... 2 npm 不完全指南 ...................................................................................................................... 6 npm 多源鏡像和企業(yè)級部署私服原理 .................................................................................. 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ù)用一個 polyfill ........................................................................................................... 54 尋找最佳的 polyfill 方案 ...................................................................................................... 59 總結(jié) ........................................................................................................................................ 62 07 梳理混亂的 Babel，拒絕編譯報(bào)錯 ............................................................ 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 從公共庫處理的問題，談如何做好“掃雷人” ................................................................. 79 應(yīng)用項(xiàng)目構(gòu)建和公共庫構(gòu)建的差異 .................................................................................... 81 一個企業(yè)級公共庫的設(shè)計(jì)原則 ............................................................................................ 81 制定一個統(tǒng)一標(biāo)準(zhǔn)化的 babel-preset .................................................................................... 82 總結(jié) ........................................................................................................................................ 91 09 從 0 到 1 構(gòu)建一個符合標(biāo)準(zhǔn)的公共庫 ....................................................... 92 實(shí)戰(zhàn)打造一個公共庫 ............................................................................................................ 92 打造公共庫，支持 script 標(biāo)簽引入代碼 .............................................................................. 96 打造公共庫，支持 Node.js 環(huán)境 ........................................................................................ 100 從開源庫總結(jié)生態(tài)設(shè)計(jì) ...................................................................................................... 103 總結(jié) ...................................................................................................................................... 104 10 代碼拆分與按需加載 .............................................................................. 105 代碼拆分與按需加載的應(yīng)用場景 ...................................................................................... 105 代碼拆分與按需加載技術(shù)的實(shí)現(xiàn) ...................................................................................... 106 Webpack 賦能代碼拆分和按需加載 ................................................................................... 113 總結(jié) ...................................................................................................................................... 119 11 Tree Shaking：移除 JavaScript 上下文中的未引用代碼 ......................... 120 Tree Shaking 必會理論 ........................................................................................................ 120 前端工程化生態(tài)和 Tree Shaking 實(shí)踐 ............................................................................... 124 總結(jié) ...................................................................................................................................... 131 12 理解 AST 實(shí)現(xiàn)和編譯原理 ...................................................................... 132 AST 基礎(chǔ)知識 ..................................................................................................................... 132 AST 實(shí)戰(zhàn)：實(shí)現(xiàn)一個簡易 Tree Shaking 腳本 ................................................................... 136 總結(jié) ...................................................................................................................................... 141 13 工程化思維：應(yīng)用主題切換 .................................................................... 142 設(shè)計(jì)一個主題切換工程架構(gòu) .............................................................................................. 142 主題色切換架構(gòu)實(shí)現(xiàn) .......................................................................................................... 145 總結(jié) ...................................................................................................................................... 150 14 解析 Webpack 源碼，實(shí)現(xiàn)工具構(gòu)建 ....................................................... 151 Webpack 的初心和奧秘 ...................................................................................................... 151 手動實(shí)現(xiàn)打包器 .................................................................................................................. 156 總結(jié) ...................................................................................................................................... 160 15 跨端解析小程序多端方案 ....................................................................... 161 小程序多端方案概覽 .......................................................................................................... 161 小程序多端——編譯時方案 ............................................................................................... 162 小程序多端——運(yùn)行時方案 ............................................................................................... 164 小程序多端——類 React 風(fēng)格的編譯時和運(yùn)行時結(jié)合方案 ............................................ 166 小程序多端方案的優(yōu)化 ...................................................................................................... 176 總結(jié) ...................................................................................................................................... 178 16 從移動端跨平臺到 Flutter 的技術(shù)變革 .................................................... 179 移動端跨平臺技術(shù)原理和變遷 .......................................................................................... 179 Flutter 新貴背后的技術(shù)變革 ............................................................................................... 188 總結(jié) ...................................................................................................................................... 194 第三部分 核心框架原理與代碼設(shè)計(jì)模式 17 axios：封裝一個結(jié)構(gòu)清晰的 Fetch 庫 .................................................... 196 設(shè)計(jì)請求庫需要考慮哪些問題 .......................................................................................... 196 axios 設(shè)計(jì)之美 ..................................................................................................................... 199 總結(jié) ...................................................................................................................................... 206 18 對比 Koa 和 Redux：解析前端中間件 .................................................... 207 以 Koa 為代表的 Node.js 中間件設(shè)計(jì) ............................................................................... 207 對比 Express，再談 Koa 中間件 ........................................................................................ 210 Redux 中間件設(shè)計(jì)和實(shí)現(xiàn) ................................................................................................... 213 利用中間件思想，實(shí)現(xiàn)一個中間件化的 Fetch 庫 ............................................................ 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)簡介 ...................................................................................................................... 238 堆棧和隊(duì)列 .......................................................................................................................... 239 鏈表（單向鏈表和雙向鏈表） .......................................................................................... 241 樹 .......................................................................................................................................... 247 圖 .......................................................................................................................................... 251 總結(jié) ...................................................................................................................................... 255 22 剖析前端數(shù)據(jù)結(jié)構(gòu)的應(yī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 打造一個 lucas-scripts ......................................................................................................... 270 總結(jié) ...................................................................................................................................... 276 24 自動化代碼檢查：剖析 Lint 工具 ............................................................ 277 自動化工具 .......................................................................................................................... 277 lucas-scripts 中的 Lint 配置最佳實(shí)踐 ................................................................................. 281 工具背后的技術(shù)原理和設(shè)計(jì) .............................................................................................. 283 總結(jié) ...................................................................................................................................... 285 25 前端+移動端離線包方案設(shè)計(jì) .................................................................. 286 從流程圖分析 hybrid 性能痛點(diǎn) .......................................................................................... 286 相應(yīng)優(yōu)化策略 ...................................................................................................................... 287 離線包方案 .......................................................................................................................... 289 方案持續(xù)優(yōu)化 ...................................................................................................................... 293 總結(jié) ...................................................................................................................................... 294 26 設(shè)計(jì)一個“萬能”的項(xiàng)目腳手架 ............................................................ 295 命令行工具的原理和實(shí)現(xiàn) .................................................................................................. 295 從命令行到萬能腳手架 ...................................................................................................... 304 總結(jié) ...................................................................................................................................... 306 第五部分 前端全鏈路——Node.js 全棧開發(fā) 27 同構(gòu)渲染架構(gòu)：實(shí)現(xiàn) SSR 應(yīng)用 .............................................................. 308 實(shí)現(xià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)一個 lucas-gateway ...................................................................................................... 333 總結(jié) ...................................................................................................................................... 340 30 實(shí)現(xiàn)高可用：Puppeteer 實(shí)戰(zhàn) ................................................................. 341 Puppeteer 簡介和原理 ......................................................................................................... 341 Puppeteer 在 SSR 中的應(yīng)用 ................................................................................................ 342 Puppeteer 在 UI 測試中的應(yīng)用 ........................................................................................... 345 Puppeteer 結(jié)合 Lighthouse 的應(yīng)用場景 ............................................................................. 345 通過 Puppeteer 實(shí)現(xiàn)海報(bào) Node.js 服務(wù) .............................................................................. 347 總結(jié) ...............................................................................................................................353
你還可能感興趣
我要評論
|
