前言

回顾前端的发展历程，从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提高前端性能等。

致谢

感谢我的家人，督促我让整本书更快成型。两个孩子的欢声笑语让我在写作过程中减少了很多压力。

因技术水平有限，书中难免有错漏之处，敬请读者不吝赐教，我将感激不尽。