作者：侯策
页数：376
出版社：电子工业出版社
出版日期：2022
ISBN：9787121439827
电子书格式：pdf/epub/txt
内容简介
快速发展的红利、优胜劣汰的挑战、与生俱来的混乱、同混乱抗衡的规范……这些都是前端从业者无法逃避的现状。有人说，做好业务支撑是活在当下，而做好技术基建是活好未来。当业务量到达一定量级时，成为“规范制定者”，成为“思考者”，像“架构师”一样思考问题，才能最终成为“优胜者”。本书内容不是简单的思维模式输出，不是纯粹“阳春白雪”的理论，也不是社区搜索即得的 Webpack配置罗列和原理复述，而是从项目痛点中提取出的基础建设的意义，以及从个人发展瓶颈中总结出的工程化架构和底层设计原理。本书不仅能帮助开发者夯实基础，还能为开发者实现技术进阶提供帮助和启发。
作者简介
侯策，就职于某内容社区类互联网上市公司，具有多年海内外工作经验，曾先后就职于法国ENGIE集团、Google、百度等知名企业。擅长前端工程化体系搭建及基础建设架构设计。深入了解前端各类技术框架和相关技术栈，具有丰富的高流量产品稳定性建设及性能和用户体验优化经验，在业务提效和质量保障方面亦有深厚积累，在跨端开发（包括小程序矩阵开发）、富文本编辑器、Node.js、React等技术方向有较强的业内影响力。在技术氛围打造、团队成员培养、技术体系建设、新技术落地、难点攻坚、历史包袱重构等方面均有丰富的实践经历。著有《React状态管理与同构实践》《前端开发核心知识进阶：从夯实基础到突破瓶颈》等多部技术图书。
本书特色
适读人群 ：想要加深前端基础建设能力的开发者；想要培养前端架构思维的开发者及从业者。1.选取了30个非常典型的前端基础建设和架构设计相关主题，内容新颖、重点突出、不落俗套。读者可以根据需求直接选择自己感兴趣的内容阅读。2.一改市面上一些前端技术书以框架或包为中心的“重技巧却少思考”的现状，将前端开发实践理论化、系统化、范式化、路径化，读者可以从中学到一套行之有效的方法论！
目录
第一部分 前端工程化管理工具
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
