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

前　言 像架构师一样思考，突破技术瓶颈 透过工程基建，架构有迹可循。 前端开发是一个庞大的体系，纷繁复杂的知识点铸成了一张信息密度极高的图谱。在开发过程中，一行代码就可能使宿主引擎陷入性能瓶颈；团队中的代码量呈几何级数式增长，可能愈发尾大不掉，掣肘业务的发展。这些技术环节，或宏观或微观，都与工程化基建、架构设计息息相关。 如何打造一个顺滑的工程化流程，为研发效率不断助力？如何建设一个稳定可靠的基础设施，为业务产出保驾护航？对于这些问题，我在多年的工作中反复思考、不断实践，如今也有了一些经验和感悟。 但事实上，让我将这些积累幻化成文字是需要一个契机的，下面我先从写本书的初心及本书涉及的技术内容谈起。 【一】求贤若渴的伯乐和凤毛麟角的人才 作为团队管理者，一直以来我都被人才招聘所困扰。经历了数百场面试，我看到了太多千篇一律的“皮囊”。 ?我精通Vue.js，看过Vue.js源码 = 我能熟记Object.defineProperty/Proxy，也知道发布/订阅模式。 ?我精通AST = 我知道AST是抽象语法树，知道能用它做些什么。 ?我能熟练使用Babel = 我能记清楚很多Babel配置项，甚至默写出Babel Plugin模板代码。 当知识技术成为应试八股文时，人才招聘就会沦为“面试造火箭，工作拧螺丝”的逢场作戏。对于上述问题，我不禁会追问： 你知道Vue.js完整版本和运行时版本的区别吗？ 如果你不知道Vue.js运行时版本不包含模板编译器，大概率也无法说清Vue.js在模板编译环节具体做了什么。如果只知道实现数据劫持和发布/订阅模式的几个API，又何谈精通原理？ 请你手写一个“匹配有效括号”算法，你能做到吗？ 如果连LeetCode上easy难度的编译原理相关算法题都无法做出，何谈理解分词、AST这些概念？ 如何设计一个C端Polyfill方案？ 如果不清楚@babel/preset-env的useBuiltIns不同配置背后的设计理念，何谈了解Babel？更别说设计一个性能更好的降级方案了。 另一方面，我很理解求职者，他们也面临困惑。 ?该如何避免相似的工作做了3年，却没能积累下3年的工作经验？ ?该如何从繁杂且千篇一律的业务需求中抽身出来，花时间总结经验、提高自己？ ?该如何为团队带来更高的价值，体现经验和能力？ 为了破局，焦虑的开发者渐渐成为“短期速成知识”的收藏者。你以为收藏的是知识，其实收藏的是“知道”；你以为掌握了知识，其实只是囤积了一堆“知道”。 近些年我也一直在思考：如何抽象出真正有价值的开发知识？如何发现并解决技术成长瓶颈，培养人才？于是，我将自己在海外和BAT服务多年积累的经验分享给大家，将长时间以来我认为最有价值的信息系统性地整理输出——这正是我写这本书的初心。 【二】从前端工程化基建和架构设计的价值谈起 从当前的招聘情况和开发社区中呈现的景象来看，短平快、碎片化的内容（比如快速搞定“面经题目”）很容易演变成跳槽加薪的“兴奋剂”，但是在某种程度上，它们只能成为缓解焦虑的“精神鸦片”。 试想，如果你资质平平，缺少团队中“大牛”的指点，工作内容只是在已有项目中写几个页面或配合运营活动，如此往复，技术水平一定无法提高，工作三四年后可能和应届生并无差别。 这种情况出现的主要原因还是大部分开发者无法接触到好项目。这里的“好项目”是指：你能在项目中从0到1打造应用的基础设施、确定应用的工程化方案、实现应用构建和发布的流程、设计应用中的公共方法和底层架构。只有系统地研究这些内容，开发者才能真正打通自身的“任督二脉”，实现个人和团队价值的最大化。 我将上述内容总结定义为：前端工程化基建和架构设计。 这是每位开发者成长道路上的稀缺资源。一轮又一轮的业务需求是烦琐和机械的，但工程化基建和架构设计却是万丈高楼的根基，是巨型航母的引擎和发动机，是区分一般开发者和一流架构师的分水岭。因此，前端工程化基建和架构设计的价值对于个人、业务来说都是不言而喻的。 【三】我理解的“前端工程化基建和架构设计” 我们知道，前端目前处在前所未有的地位高度：前端职场既快速发展着，也迎接着优胜劣汰；前端技术有着与生俱来的混乱，也有着与这种混乱抗衡的规范。这些都给前端工程化基建带来了更大的挑战，对技术架构设计能力也提出了更高的要求。 对于实际业务来说，在前端工程化基建当中： ?团队作战并非单打独斗，那么如何设计工作流程，打造一个众人皆赞的项目根基？ ?项目依赖纷繁复杂，如何做好依赖管理和公共库管理？ ?如何深入理解框架，真正做到精通框架和准确拿捏技术选型？ ?从最基本的网络请求库说起，如何设计一个稳定灵活的多端Fetch库？ ?如何借助Low Code或No Code技术，实现越来越智能的应用搭建方案？ ?如何统一中后台项目架构，提升跨业务线的产研效率？ ?如何开发设计一套适合业务的组件库，封装分层样式，最大限度做到复用，提升开发效率？ ?如何设计跨端方案，“Write Once，Run Everywhere”是否真的可行？ ?如何处理各种模块化规范，以及精确做到代码拆分？ ?如何区分开发边界，比如前端如何更好地利用Node.js方案开疆扩土？ 以上这些都直接决定了前端的业务价值，体现了前端团队的技术能力。那到底什么才是我理解的“前端工程化基建和架构设计”呢？ 我以身边常见的一些小事儿为例：不管是菜鸟还是经验丰富的开发者，都有过被配置文件搞到焦头烂额的时候，一不小心就引起命令行报错，编译不通过，终端上只显示了短短几行英文字母，却都是warning和error。 也许你可以通过搜索引擎找到临时解决方案，匆匆忙忙重新回到业务开发中追赶工期。但报错的本源到底是什么，究竟什么是真正高效的解决方案？如果不深入探究，你很快还会因为类似的问题浪费大把时间，同时技术能力毫无提升。 再试想，对于开发时遇见的一些诡异问题，你也许会删除一次node_moudles，并重新执行npm install命令，然后发现“重启大法”有时候真能奇迹般地解决问题。可是你对其中的原理却鲜有探究，也不清楚这是否是一种优雅的解决方案。 又或者，为了实现一个通用功能（也许就是为了找到一个函数参数的用法），你不得不翻看项目中的“屎山代码”，浪费大把时间。可是面对历史代码，你却完全不敢重构。经过日积月累，“历史”逐渐成为“天坑”，“屎山代码”成为业务桎梏。 基于多年对一线开发过程的观察，以及对人才成长的思考，我心中的“前端工程化基建和架构设计”已不是简单的思维模式输出，不是“阳春白雪”的理论，也不是社区搜索即得的Webpack配置罗列和原理复述，而是从项目中的痛点提取基础建设的意义，从个人发展瓶颈总结工程化架构和底层设计思想。基于此，这本书的内容呼之欲出。 【四】本书内容 事实上，前端工程化基建和架构设计相关话题在网上少之又少。我几乎翻遍了社区所有的相关课程和图书，它们更多的是讲解Webpack的配置和相关源码，以及列举npm基础用法等。我一直在思考，什么样的内容能够帮助读者突破“会用”的表层，从更高的视角看待问题。 本书包括五个部分，涵盖30个主题（30篇），其中每一部分的内容简介如下。 第一部分 前端工程化管理工具（01~05） 以npm和Yarn包管理工具切入工程化主题，通过Webpack和Vite构建工具加深读者对工程化的理解。事实上，工具的背后是原理，因此我不会枯燥地列举某个工具的优缺点和基本使用方式，而是会深入介绍几个极具代表性的工具的技术原理和演变过程。只有吃透这些内容，才能真正理解工程化架构。希望通过这一部分，读者能够认识到如何刨根问底地学习，如何像一名架构师一样思考。 第二部分 现代化前端开发和架构生态（06~16） 这部分将一网打尽大部分开发者每天都会接触却很少真正理解的知识点。希望通过第二部分，读者能够真正意识到，Webpack工程师的职责并不是写写配置文件那么简单，Babel生态体系也不是使用AST技术玩转编译原理而已。这部分内容能够帮助读者培养前端工程化基础建设思想，这也是设计一个公共库、主导一项技术方案的基础知识。 第三部分 核心框架原理与代码设计模式（17~22） 在这一部分中，我们将一起来探索经典代码的奥秘，体会设计模式和数据结构的艺术，请读者结合业务实践，思考优秀的设计思想如何在工作中落地。同时，我们会针对目前前端社区所流行的框架进行剖析，相信通过不断学习经典思想和剖析源码内容，各位读者都能有新的收获。 第四部分 前端架构设计实战（23~26） 在这一部分中，我会一步一步带领大家从0到1实现一个完整的应用项目或公共库。这些工程实践并不是社区上泛滥的Todo MVC，而是代表先进设计理念的现代化工程架构项目（比如设计实现前端+移动端离线包方案）。同时在这一部分中，我也会对编译和构建、部署和发布这些热门话题进行重点介绍。 第五部分 前端全链路——Node.js全栈开发（27~30） 在这一部分中，我们以实战的方式灵活运用并实践Node.js。这一部分不会讲解Node.js的基础内容，读者需要先储备相关知识。我们的重点会放在Node.js的应用和发展上，比如我会带大家设计并完成一个真正意义上的企业级网关，其中涉及网络知识、Node.js 理论知识、权限和代理知识等。再比如，我会带大家研究并实现一个完善可靠的Node.js服务系统，它可能涉及异步消息队列、数据存储，以及微服务等传统后端知识，让读者能够真正在团队项目中落地Node.js技术，不断开疆扩土。 总之，这本书内容很多，干货满满。 客观来说，我绝不相信一本“武功秘籍”就能让一个人一路打怪升级，一步登天。我更想让这本书成为一个促成你我交流的机会，在输出自己经验积累的同时，我希望它能帮助到每一个人。你准备好了吗？来和我一起，像架构师一样思考吧！

目 录 第一部分 前端工程化管理工具 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