本书共5 章。第1、2 章系统介绍前端工程化的核心知识，包括Babel 7、ES 规范、Deno 开发入门、脚手架、自动化部署、Nginx、Jest 测试、Webpack 5、Vite、Rollup、Parcel 等。第3、4 章着重介绍前端架构的核心思想，包括前端核心模块的6 种常用设计模式、V8 引擎、宏任务与微任务、异步加载规范和函数式编程等。第5 章通过实战详细介绍如何从0 开发微前端和WebAssembly，帮助前端人员开拓视野。 本书系统介绍了前端开发的工程核心及前沿实战。相信无论是初级开发人员，还是具有丰富经验的中高级开发人员都能从本书中找到需要的内容，都能从阅读本书中有所收获。

荐序1 随着移动互联网的发展，IT技术从来没有像今天一样和人们的生活结合得如此紧密。从jQuery开始，网页交互的友好度及开发效率开始大幅提升。随着Web端应用越来越受到人们的青睐，React、Vue等前端技术甚至在后端代码中独当一面，它们的应用使得复杂Web应用的规模化研发成为可能。互联网全渠道业务的不断发展，使得同一个业务在iOS与Android等多平台同时提供服务成为标配，因此ReactNative和Flutter等技术应运而生，它们大大降低了跨平台应用的研发难度。2017年，腾讯尝试在微信中培育自己的生态圈——小程序诞生了，我们从来没有像在小程序中一样在一个触点如此丰富的生态圈中快速使用一个新的应用。我们看到了像Taro、Uni-app一样的框架，使得同一份源代码可以运行在不同的环境中，让React、Vue程序员无缝、高效地开发面向多客户端的应用。正如Gartner所讲，这是一个知识公民化（Democratization of Expertise）的时代，我们每个人不但是这个互联网时代的内容消费者，更是内容的创造者和传递者。这所有的一切都离不开每位前端工程师的智慧创造。在每日“搬砖”之余，当我们看到一个个为这个世界提供各种各样触点的页面时，也未尝不是一件很有成就感的事情。 前端技术的快速迭代也给前端从业者造成了诸多困扰。对于立志成为前端架构师的同学们来讲，除了生啃不断推陈出新的框架，软件工程能力的锻炼与提升才是其中的精髓。值得庆幸的是，跃伟集多年的研发经验，以前端工程化为框架，以代码实战为方式构建了整本书的脉络。本书不仅包括构建前端脚手架等必备的入门知识，还为中级研发人员提供了设计模式、性能优化等内容。除此之外，本书还以微前端、Deno为主题精心设计了实战的内容。无论是想从实战出发来入门前端的初学者，还是想通过查缺补漏来构建知识框架的中高级研发人员，都可以通过本书获益良多。还等什么？让我们拿起键盘跟着跃伟一起敲代码吧。 胡帅 联通数字科技西安研发中心技术总监、首席架构师，中国联通集团B级专家 推荐序2 2021年，前端技术领域发展到了新高度，使用Node.js工具构建前端成了标配，微前端、WebAssembly也开始大范围进入企业应用，面向未来开发的Deno带给前端开发更高的自由度，更健壮的TypeScript语言已成为前端标配。前端开发不再低效、随便，它已完全步入次世代的发展进程中。作为一名合格的前端开发者，我们不仅要掌握Vue、React等UI层面的开发框架，更要对前端领域有一个整体认知，这些知识将来会是标配，不了解这些知识，我们将无法跟上前端发展进程，最终将被时代所淘汰。 跃伟是前端老大哥，他将10多年从业经验从工程化、开发、构建工具使用、代码模块化组织、部署、网站性能优化等角度深入总结、沉淀，展现了前端技术的整体面貌，适合对前端有一定开发经验且“欲一窥山之大而不得”的中高级前端从业者阅读。看完本书，你将对前端领域的发展有新的认知。对书中的每一章节，你都可以深究下去，建议你动手在GitHub上创建demo工程实验。本书涵盖了前端技术领域的方方面面，是从高级前端工程师向前端架构师之路前进的启蒙之作。 胡碧青 58同城前资深前端开发工程师、京东科技前前端架构师、快手前端专家 前言 回顾前端的发展历程，从HTML、CSS、JavaScript前端三剑客，到模块开发规范、ES规范，再到Vue、Angular、React三大框架，变化速度非常快，甚至有句戏谑之言“前端每三个月就会有新的轮子出现”。 三大框架及辅助技术的不断发展，让前端工程化的重要性越来越突出。前端工程化就是把前端项目作为一个完整的工程进行分析、组织、构建和优化，在相应的过程中进行优化配置，从而使项目结构清晰、边界清晰，使各开发人员分工明确、配合默契，进而达到提高开发效率的目的。 为什么要学习前端工程化 作为前端开发者，如果想提高自己的核心竞争力，想摆脱只做日常业务开发的烦恼，想迈向高级开发者的行列，就必须深度掌握前端工程化知识。前端工程化的优点如下： （1）极大地提高开发效率，降低交付风险。 （2）降低大型项目的开发难度，对开发更加友好。 （3）项目优化统一配置，让工程优化变得更加容易。 （4）保持项目的构建稳定，保证开发质量。 （5）有利于大型团队协作开发。 怎样学习前端工程化 要想学习前端工程化，就必须掌握模块化、组件化、规范化、高性能和自动化这5个方面。本书对前端工程化的大部分内容都有涉及，下面的思维导图对前端工程化进行了分类整理，方便大家查阅和有针对性地阅读。 如果你对工程化的概念有一定的了解但是实战不足，建议从第1章开始循序渐进地阅读，这样更有利于加深对工程化的理解，因为这更像是一条纵向延长线，从基础知识到高级开发实战。 本书特色 结合开发中的细节，系统讲解工程化基础。 注重实战，实例简单易懂，并能快速上手。 开拓视野，从0到1讲解以single-spa为基础的微前端实战。 学以致用，用WebAssembly提高前端性能。 读者对象 想学习前端开发整体流程的初级开发者。 想在前端开发技能上拔高的中级开发者。 本书内容 第1章首先从packag.json文件入手，深度剖析package.json文件的基本配置，帮助开发人员掌握package.json文件是如何与常见的第三方库进行配合的。其次详细介绍Babel 7配置，让前端开发人员对Babel的配置不再头疼。接着详细介绍ES2017~2021的主要特性，以便开发人员系统掌握这些特性。最后介绍Deno，它为前端提供了一种新的开发思路。 第2章首先介绍脚手架的实现方式。其次介绍Nginx核心配置，打通从部署到配置的各个环节。接着详细介绍Jest测试核心，让前端测试不再困难。然后介绍如何用VuePress开发前端文档。最后从Webpack 5入手，介绍Webpack 5的核心特性，并结合打包工具Rollup、Parcel和Vite详细介绍前端构建的主要配置。 第3章详细介绍前端架构需要掌握的知识。首先介绍常用的6种设计模式，以及V8引擎。其次详细介绍浏览器对宏任务和微任务的处理过程。接着依次介绍异步加载规范和函数式编程入门。最后通过一个案例剖析状态的原理。 第4章从浏览器的运行机制入手，深入剖析Chrome是如何工作的，并以此为基础介绍浏览器的缓存机制和前端优化策略。 第5章通过实战介绍PWA、微前端、Docker和WebAssembly等。例如，如何用WebAssembly提高前端性能等。 致谢 感谢我的家人，督促我让整本书更快成型。两个孩子的欢声笑语让我在写作过程中减少了很多压力。 因技术水平有限，书中难免有错漏之处，敬请读者不吝赐教，我将感激不尽。

第1章 前端开发核心及Deno Web实战 1 1.1 前端中的“大管家”package.json文件 1 1.1.1 生成package.json文件 2 1.1.2 name字段 3 1.1.3 version字段 4 1.1.4 OS配置和CPU配置 8 1.2 前端中的编译工具Babel 7 10 1.2.1 Babel中的4种配置文件 11 1.2.2 Babel的工作过程 13 1.2.3 @babel/polyfill插件 18 1.2.4 @babel/runtime插件和@babel/plugin-transform-runtime插件 19 1.2.5 preset配置 20 1.3 ES规范 20 1.3.1 ES2021规范 21 1.3.2 ES2020规范 23 1.3.3 ES2019规范 27 1.3.4 ES2018规范 28 1.3.5 ES2017规范 29 1.4 Deno Web实战 30 1.4.1 加载第三方包 36 1.4.2 创建服务器 36 1.4.3 Deno Web开发 37 第2章 前端工程化核心与构建工具实战 40 2.1 前端工程化概述 40 2.2 脚手架的实现方式 41 2.2.1 渲染过程 49 2.2.2 下载依赖 49 2.3 自动化部署 51 2.4 配置负载均衡Nginx 54 2.4.1 正向代理和反向代理 55 2.4.2 配置Nginx 55 2.4.3 配置反向代理 57 2.4.4 开启gzip压缩 58 2.4.5 支持WebSocket 58 2.4.6 图片防盗配置 59 2.5 Jest测试核心 60 2.5.1 Jest测试的基本功能 61 2.5.2 运行测试用例 62 2.5.3 setUp函数和tearDown函数 67 2.5.4 mock函数 68 2.5.5 测试覆盖率 72 2.6 前端文档 73 2.7 构建工具实战 78 2.7.1 “经典”Webpack 5的新特性 78 2.7.2 “新秀”Vite构建实战 92 2.7.3 小巧的Rollup实战 99 2.7.4 零配置的Parcel实战 104 第3章 前端核心模块的设计与实现 110 3.1 常用设计模式介绍 110 3.1.1 状态模式 110 3.1.2 策略模式 114 3.1.3 适配器模式 117 3.1.4 观察者模式 121 3.1.5 代理模式 126 3.1.6 装饰者模式 128 3.2 V8引擎 131 3.2.1 WebKit的架构 132 3.2.2 隐藏类 134 3.2.3 对象在内存中的表示 135 3.2.4 内存管理 137 3.3 宏任务和微任务 138 3.4 异步加载规范 147 3.4.1 前端模块规范：AMD和RequireJS 147 3.4.2 前端模块规范：CMD和SeaJS 149 3.4.3 前端模块规范：UMD 151 3.4.4 前端模块规范：ES6 module 152 3.4.5 前端模块规范：CommonJS 153 3.5 函数式编程入门 154 3.5.1 引子 155 3.5.2 函数式编程的优点 156 3.5.3 函数式编程的基础 157 3.6 实战：状态原理解析 160 第4章 性能优化指南 167 4.1 浏览器的运行机制 167 4.2 浏览器的缓存机制 176 4.3 性能分析 179 4.4 前端优化策略 186 4.4.1 图片优化和DOM优化建议 186 4.4.2 JavaScript代码优化建议 189 4.4.3 Webpack优化建议 199 4.4.4 使用HTTP/2 207 4.4.5 使用WebSocket 210 第5章 实战：从0开发微前端和WebAssembly 213 5.1 以天气为例实战PWA应用 213 5.2 基于single-spa的微前端实战 222 5.3 在Docker中部署前端应用 236 5.4 用WebAssembly提高前端性能 245 5.4.1 WebAssembly概述 245 5.4.2 WebAssembly案例 248