正版 前端架构师:基础建设与架构设计思想 侯策 电子工业出版社 9

目 录 第一部分 前端工程化管理工具 01 安装机制及企业级部署私服原理 ................................................................ 2 npm 内部机制与核心原理 ...................................................................................................... 2 npm 不接近指南 ...................................................................................................................... 6 npm 多源镜像和企业级部署私服原理 .................................................................................. 9 总结 ........................................................................................................................................ 11 02 Yarn 安装理念及依赖管理困境破解 .......................................................... 12 Yarn 的安装机制和背后思想 ................................................................................................ 14 破解依赖管理困境 ................................................................................................................ 17 总结 ........................................................................................................................................ 21 03 CI 环境下的 npm 优化及工程化问题解析 ................................................. 22 CI 环境下的 npm 优化 .......................................................................................................... 22 更多工程化相关问题解析 .................................................................................................... 23 很好实操建议 ........................................................................................................................ 30 总结 ........................................................................................................................................ 31 04 主流构建工具的设计考量 ......................................................................... 32 从 Tooling.Report 中，我们能学到什么 .............................................................................. 32 总结 ........................................................................................................................................ 36 05 Vite 实现：源码分析与工程构建 ............................................................... 37 Vite 的“横空出世”............................................................................................................. 37 Vite 实现原理解读 ................................................................................................................ 38 总结 ........................................................................................................................................ 50 第二部分 现代化前端开发和架构生态 06 谈谈 core-js 及 polyfill 理念 ...................................................................... 52 core-js 工程一览 .................................................................................................................... 52 如何复用一个 polyfill ........................................................................................................... 54 寻找很好的 polyfill 方案 ...................................................................................................... 59 总结 ........................................................................................................................................ 62 07 梳理混乱的 Babel，拒绝编译报错 ............................................................ 63 Babel 是什么 .......................................................................................................................... 63 Babel Monorepo 架构包解析 ................................................................................................ 64 Babel 工程生态架构设计和分层理念 .................................................................................. 75 总结 ........................................................................................................................................ 78 08 前端工具链：统一标准化的 babel-preset ................................................. 79 从公共库处理的问题，谈如何做好“扫雷人” ................................................................. 79 应用项目构建和公共库构建的差异 .................................................................................... 81 一个企业级公共库的设计原则 ............................................................................................ 81 制定一个统一标准化的 babel-preset .................................................................................... 82 总结 ........................................................................................................................................ 91 09 从 0 到 1 构建一个符合标准的公共库 ....................................................... 92 实战打造一个公共库 ............................................................................................................ 92 打造公共库，支持 script 标签引入代码 .............................................................................. 96 打造公共库，支持 Node.js 环境 ........................................................................................ 100 从开源库总结生态设计 ...................................................................................................... 103 总结 ...................................................................................................................................... 104 10 代码拆分与按需加载 .............................................................................. 105 代码拆分与按需加载的应用场景 ...................................................................................... 105 代码拆分与按需加载技术的实现 ...................................................................................... 106 Webpack 赋能代码拆分和按需加载 ................................................................................... 113 总结 ...................................................................................................................................... 119 11 Tree Shaking：移除 JavaScript 上下文中的未引用代码 ......................... 120 Tree Shaking 必会理论 ........................................................................................................ 120 前端工程化生态和 Tree Shaking 实践 ............................................................................... 124 总结 ...................................................................................................................................... 131 12 理解 AST 实现和编译原理 ...................................................................... 132 AST 基础知识 ..................................................................................................................... 132 AST 实战：实现一个简易 Tree Shaking 脚本 ................................................................... 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 第三部分 核心框架原理与代码设计模式 17 axios：封装一个结构清晰的 Fetch 库 .................................................... 196 设计请求库需要考虑哪些问题 .......................................................................................... 196 axios 设计之美 ..................................................................................................................... 199 总结 ...................................................................................................................................... 206 18 对比 Koa 和 Redux：解析前端中间件 .................................................... 207 以 Koa 为代表的 Node.js 中间件设计 ............................................................................... 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 第四部分 前端架构设计实战 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 相应优化策略 ...................................................................................................................... 287 离线包方案 .......................................................................................................................... 289 方案持续优化 ...................................................................................................................... 293 总结 ...................................................................................................................................... 294 26 设计一个“万能”的项目脚手架 ............................................................ 295 命令行工具的原理和实现 .................................................................................................. 295 从命令行到万能脚手架 ...................................................................................................... 304 总结 ...................................................................................................................................... 306 第五部分 前端全链路――Node.js 全栈开发 27 同构渲染架构：实现 SSR 应用 .............................................................. 308 实现一个简易的 SSR 应用 ................................................................................................. 308 SSR 应用中容易忽略的细节 .............................................................................................. 312 总结 ...................................................................................................................................... 317 28 性能守卫系统设计：完善 CI/CD 流程 ..................................................... 318 性能守卫理论基础 .............................................................................................................. 318 Lighthouse 原理介绍 ........................................................................................................... 319 性能守卫系统 Perf-patronus ............................................................................................... 322 总结 ...................................................................................................................................... 328 29 打造网关：改造企业 BFF 方案 ............................................................... 329 BFF 网关介绍和优缺点梳理 .............................................................................................. 329 打造 BFF 网关需要考虑的问题 ......................................................................................... 330 实现一个 lucas-gateway ...................................................................................................... 333 总结 ...................................................................................................................................... 340 30 实现高可用：Puppeteer 实战 ................................................................. 341 Puppeteer 简介和原理 ......................................................................................................... 341 Puppeteer 在 SSR 中的应用 ................................................................................................ 342 Puppeteer 在 UI 测试中的应用 ........................................................................................... 345 Puppeteer 结合 Lighthouse 的应用场景 ............................................................................. 345 通过 Puppeteer 实现海报 Node.js 服务 .............................................................................. 347 总结 ...............................................................................................................................353

侯策，就职于某内容社区类互联网上市公司，具有多年海内外工作经验，曾先后就职于法国ENGIE集团、Google、百度等知名企业。 擅长前端工程化体系搭建及基础建设架构设计。深入了解前端各类技术框架和相关技术栈，具有丰富的高流量产品稳定性建设及性能和用户体验优化经验，在业务提效和质量保障方面亦有深厚积累，在跨端开发（包括小程序矩阵开发）、富文本编辑器、Node.js、React等技术方向有较强的业内影响力。在技术氛围打造、团队成员培养、技术体系建设、新技术落地、难点攻坚、历史包袱重构等方面均有丰富的实践经历。 著有《React状态管理与同构实践》《前端开发核心知识进阶：从夯实基础到突破瓶颈》等多部技术图书。 可通过知乎社区联系作者：Lucas HC

"在我近十年策划会议的职业生涯里，每每和会议听众了解前端需求，总会听到他们抱怨“轮子太多”“框架太新”“学不过来”……但我在和讲师们及联席主席沟通时发现，他们其实始终在关注那些“不变”的，前端始终“万变不离其宗”——永远是为用户界面服务的，永远是为提升生产效率服务的。这是工程化要解决的问题，抓住工程化这条主线，用规范、工具和框架解决前端开发及前后端协作的问题，才能保证自己立于不败之地。 非常庆幸看到这本书出现，作者通过对真实的项目经验进行总结，帮助业界归纳出避免混乱和提升效能的行之有效的方法，以及实现前端工程化的锦囊妙计。希望拿到本书的读者能学以致用，让前端技术发挥更大的价值。 全球软件案例研究峰会（TOP100Summit）内容主理人、msup研究院院长，赵强 现代Web开发日益复杂化和多元化，前端工程化已成为复杂业务中不可或缺的提效方案。本书从工程化角度切入，延伸到前端架构设计领域，既包含理论知识，也有大量真实案例。在前端开发尚未形成很好范式的背景下，本书可以帮助我们在业务需求和架构设计中寻找团队降本增效的方法论和创新灵感。 DCloud CTO、uni-app产品负责人，崔红保 近几年，基于前端技术开发的应用已渗透到越来越多的场景，这也对前端工程化基建和前端应用架构提出了更多的挑战。本书比较系统地介绍了前端工程化基建领域的关键场景和相关生态，并且结合作者多年的从业经历，分享了现代化前端工程架构的实践方案，相信可以为读者带来一些新的启发。 字节跳动软件工程师，李玉北 每个前端工程师都有一个架构师的梦，然而很多前端工程师在日复一日、年复一年的业务代码中遇到了瓶颈，不知道如何进一步提升自己，因此在迭代如此之快的前端领域感到迷茫。本书会教你如何像架构师一样思考，如何突破技术瓶颈。 Deno核心代码贡献者，justjavac（@迷渡） 现代Web开发是一个庞大复杂的体系，在这个体系当中，工程化是一个不可或缺的部分。工程化构建的好坏将直接影响Web开发的效率和体验。本书由浅入深地介绍了Web开发中的工程体系相关知识，阅读和学习之后，读者可以快速构建适合个人或团队的工程体系，还可以深入了解工程化架构方面的知识。可以说，不管你是Web初学者还是具有一定经验的Web开发者，都能从中获益！ W3cplus.com站长，大漠 前端工程化是一门准实践学科，很多人具有前端开发经验但不一定有过前端工程化经验。从0到1开发一个项目是很考验架构和设计能力的。这本书补全了许多人缺失的前端工程化经验，让一些没有这方面积累的技术人员能感受到搭建复杂工程化项目的魅力，很值得一读。 新浪移动前端开发专家、前端Leader，付强（@小爝） 在当下的众多中小型公司中，研发效率（即交付能力）向来是技术团队的软肋。在刀耕火种的业务阶段，短期内可以靠加人头、加工时的方式来“堆”代码，但人越多、事越杂的时候就会越难持续。前端早早聊大会举办至今，也从用户中搜集到许多诸如此类的反馈，不少同学都陷入没有成长性需求中，痛苦不堪。很开心在当下看到侯策的这本书，它出现得正是时候，可以帮助诸多团队的负责人提升架构能力，还可以帮助团队开发人员逐阶段、有节奏地推进基础建设，解放生产力，进而大幅支撑业务增长、快速响应业务变化。 前端早早聊大会创始人，Scott 正如书中所言，你以为收藏的是知识，其实收藏的是“知道”。想要掌握更多硬核知识，我想这本书会适合你。本书作者侯策对各种打包工具的使用方法、原理、优化策略都做了非常详细的解释，对跨端方案、全栈知识也进行了细致梳理，相信新手能从中获得完整的前端知识体系，有经验者则能成为更好的架构师。 阿里云业务中台体验技术负责人，城池 本书作者侯策是留学欧洲的技术Geek，有广阔的技术视野。归国后做过一线开发人员、全栈工程师，以及技术团队管理者。他往往能够从前端技术发展脉络、工程人员成长轨迹、技术团队综合管理这三个视角来审视一个合格的前端开发工程师发展为架构师所需具备的素质及成长路径。 本书结合行业痛点，深入浅出地介绍了前端架构师所需具备的思考维度和技术素养。从工具层面，本书能帮助读者了解并精通前端开发的架构生态、框架原理、经典设计模式。从实战角度，本书涵盖了全链路Node.js前端开发攻略。其中诸多篇内容，如第11、12、14篇等，深入前端框架内部，审视JavaScript编译层面的代码翻译与执行逻辑，对前端开发者而言是一部“内功”精进宝典。又如第四部分“前端架构设计实战”，作者对自己如何提升开发效率的经验进行汇总，给出具体的实践方案与工具策略，将宝贵经验提升到了范式乃至哲学的高度，相信能够帮助读者应对一系列的开发实践问题。 总体来说，这本书一改市面上一些前端技术书以框架或包为中心的“重技巧却少思考”的现状，是少有的将前端开发实践理论化、系统化、范式化、路径化的“圭臬”！ 百度大数据实验室主任研发架构师，熊昊一博士 某种程度上来说，我很怀念jQuery时代。那时，入门前端非常简单，但今天的前端领域已有了庞大的知识体系，涵盖纷繁复杂的领域知识。从 TodoMVC 到企业中的实际项目，这中间有多少工程概念是需要理解和掌握的呢？本书对此做了较为全面的总结，应当能帮助到对此困惑的读者。 稿定科技前端工程师、《JavaScript二十年》译者，王译锋（@雪碧） 本书是作者上一部作品《前端开发核心知识进阶：从夯实基础到突破瓶颈》的延展和进阶，本书围绕前端基建与架构主题，系统化介绍了大量推荐知识，涵盖内容十分广泛。本书的亮点是深入介绍了技术背后的原理及作者多年的一线实践经验，干货满满。 知名前端博主、《React状态管理与同构实战》作者，颜海镜 在当今信息融合、链路共享、极速触达的生活环境下，互联网技术已不断深入其他行业，并作为解决问题、赋能创新的手段被广泛应用在多端、跨平台场景中。本书从前端技术入门到架构原理剖析，由浅入深，结合实战进行讲解。无论是前端初学者用于入门，还是泛前端“老鸟”进行知识拓展，相信本书都能提供帮助。 字节跳动前端工程师，师绍琨 前端工程化有时会被人狭隘地理解为Webpack，有时会被理解为某个工程脚手架，甚至会被部分同学单纯地理解为编译、构建、部署或流水线一类的概念。但是本书中介绍的架构师心中的前端工程化，并不仅仅是前面提到的这些。本书基于大家在实际开发过程中碰到的问题，将上述知识串联起来，能够帮助开发者形成适合自己的前端工程化方案。 字节跳动资深工程师，陈辰"

快速发展的红利、优胜劣汰的挑战、与生俱来的混乱、同混乱抗衡的规范……这些都是前端从业者无法逃避的现状。有人说，做好业务支撑是活在当下，而做好技术基建是活好未来。当业务量到达一定量级时，成为“规范制定者”，成为“思考者”，像“架构师”一样思考问题，才能最终成为“优胜者”。本书内容不是简单的思维模式输出，不是纯粹“阳春白雪”的理论，也不是社区搜索即得的 Webpack配置罗列和原理复述，而是从项目痛点中提取出的基础建设的意义，以及从个人发展瓶颈中总结出的工程化架构和底层设计原理。本书不仅能帮助开发者夯实基础，还能为开发者实现技术进阶提供帮助和启发。

"1.选取了30个非常典型的前端基础建设和架构设计相关主题，内容新颖、重点突出、不落俗套。读者可以根据需求直接选择自己感兴趣的内容阅读。 2.一改市面上一些前端技术书以框架或包为中心的“重技巧却少思考”的现状，将前端开发实践理论化、系统化、范式化、路径化，读者可以从中学到一套行之有效的方法论！"