开篇词-什么是前端工程？ #

记得刚入行的时候，有同事问：“我们的 title（头衔）是什么？”我脱口而出：“前端开发工程师呀！”接着，同事问：“那什么是工程师？” 年轻的我一时不知道怎么回答这个问题。在了解了一系列的前端工程化的知识之后，现在的我就可以来回答这个问题了。

类比：软件工程和前端工程 #

首先，要了解“什么是前端工程师”，一个必不可少的条件就是“什么是前端工程”，我们平时开发的过程中，可能每时每刻都在和前端工程打交道。但是，如果要给“前端工程”下一个定义，你会怎么回答呢？

因为前端的迅猛发展，“前端工程”的定义也是不断地在推陈出新。所以到目前为止，“前端工程”还没有一个官方的定义。不过，我们可以先看一下“软件工程”是怎么定义的。

关于软件工程的定义，在GB/T11457-2006《信息技术软件工程术语》中将其定义为“应用计算机科学理论和技术以及工程管理原则和方法，按预算和进度，实现满足用户要求的软件产品的定义、开发和维护的工程或进行研究的学科”。——维基百科

软件工程最初是为了应对“软件危机”而提出对策，目的是将系统性的、规范化的、可度量的方法应用到软件的开发、运行和维护中。“软件危机”是在开发大型项目的时候，由于开发的周期长、成本高、复杂度高导致的成本不可控、难以维护等问题。

“软件危机”主要表现在以下几个方面：

• 项目逐渐庞大后项目的成本不可控，包括硬件成本和人力成本；
• 项目性能和质量过低；
• 项目不符合开发前的需求；
• 项目代码质量太低导致难以维护。

工程学是一门庞大且复杂的学科，核心是结合实际建立科学的、规范的设计和生产流程，最终目的是降低生产成本，提高生产效率。软件学作为一门新兴的学科，在应对日益庞大的规模的时候，正是缺乏工程学这样科学的方法论来帮助开发者在软件的整个生命周期中控制风险、降本提效。所以，当时人们就想将工程学的理论和方法应用到软件开发领域，从而来解决软件危机中遇到的问题。

于是，将工程学和软件开发相结合就诞生了软件工程。

同理，我认为的前端工程指的就是：将工程方法系统化地应用到前端开发中，以系统、严谨、可量化的方法开发、运营、维护前端应用程序，目的是降本提效。

前端工程化的内容 #

十年前的 web 开发认为玩转前端就是精通 JQuery 和解决 IE 浏览器的兼容性问题。但是，在 2022 年（已经 2022 年了，🤦🏻‍♀️）的现在，在前端领域有着琳琅满目的专业术语和纷繁复杂的生态圈之后，就连一个初级前端都需要了解 webpack、Babel、Node、NPM/yarn、ES6/7/8、React、Vue、Sass/Less、TS、ESLint 等知识。

玩转前端？相信现在应该没几个人敢说这句话了。

每当新框架出来或者框架更新大版本的时候，朋友圈的前端们都会边转发边哀嚎“我真的学不动了”（参考 Vue3.0 时候大家的状态）。前端乃至整个 IT 行业的频繁更新迭代对我们每一个从业者提出了更高的要求。

The only constant in the world is change. （唯一不变的就是变化。）

自从 2005 年 AJAX 的诞生和普及，使得前端的范围不再局限于页面切图，可以做一些 HTTP 请求和 DOM 的处理，随着业务体量和复杂度的增长，前端不得不考虑如何做模块化和组件化。并且随着开发队伍的壮大，团队之间如何高效地合作、如何做代码的复用、如何避免重复性的体力劳动、如何更高效地构建和部署等都是前端工程化所需要解决的问题。

现在的前端已经步入工程化的阶段，我们需要用科学的理念和方法论来避免出现前面说的“软件危机”的问题，毕竟，当危机发生的时候再去解决已经为时已晚。我们对自己的要求不应该只是“前端开发” 而是更高的 “前端工程师” 。(๑•̀ㅂ•́)و✧

在我们平时的开发中，一个完整的迭代周期需要依次经过开发、测试、部署、发布这几个环节，并且在产品上线之后，我们还需要对产品进行稳定性保障也就是实时的监控和报警系统，避免产品宕机。那么，工程化需要解决的问题就是如何在整个的迭代周期中降本提效。

开发阶段 #

在开发阶段，我们需要和组内其他的前端同学协作开发，也需要和服务端同学以及其他终端的同学进行共同合作开发。同时，我们还需要和开发的上游产品以及设计同学进行合作沟通。所以，在开发阶段的降本提效主要是降低团队内的人力成本以及跨团队的沟通、协作成本。

主要的手段是通过建立各种协作规范以及需要一些技术方案或工具，其中的工程化手段主要有以下几种。

• 脚手架：快速创建前端应用的项目结构并生成模板代码。
• 公共库：维护可复用的 UI 组件库或工具模板等公共资源。
• 包管理器：方便引入第三方库/组件。
• 构建工具：进行语法校验、编译等工作，兼容最新语法，提升开发效率。
• 调试工具：本地服务器、热更新等，便于调试。

测试阶段 #

目前为止，因为前端的宿主环境不统一，可以在多终端环境中运行，不同终端表现和解析方式会有所不同，会有各种兼容性问题。所以，大部分公司的 QA 在测试前端项目内容时，都是以手动测试为主（想不到吧😅）。

但是，前端从业者们也是一直在探索自动化测试这条道路的。作为开发人员，我们有责任和义务先自己充分对自己开发的内容进行自测后再移交给专业的测试人员进行验证。在测试阶段需要用到的工程化手段有以下。

• 测试框架：提供针对单元测试、快照等自动化测试支持。
• 静态扫描工具：可以进行开发规约/最佳实践或者代码质量等方面的静态检查。
• 性能测试工具：监控并统计性能数据。

构建阶段 #

在最开始的前端开发过程中，是没有“构建”这个环节的，只需要将源代码交给后端或者上传到服务器上就可以了，后来逐步有了代码压缩和混淆的需求。之后，随着 SASS\LESS 等 CSS 预编译语言的兴起，在构建阶段需要加入 CSS 预编译的支持。再之后，随着 TS 以及三大框架的发展和普及，在构建阶段也需要加入相应的编译过程才能转化为浏览器可识别的语言。

时至今日，构建阶段已经成了现代前端开发必不可少的一个阶段，构建阶段主要的工程化手段包括以下内容。

• 编译：CSS 预编译、ES6+ 新语法的降级、框架（Vue、React、Angular等）的编译。
• 优化策略：代码压缩混淆、按需加载。
• 部署策略：Hash 指纹、CDN 配置。

部署阶段 #

前端的部署应用主要是将各个资源上传至服务器中，无论是 CSS 文件还是 JS 脚本又或者是图片、视频这些静态资源，甚至是 Node.js 的服务端代码，我们部署的目标都是将这些资源上传到指定服务器中。

所以，在部署环节，需要做的就是如何自动化地执行整个过程。

监控阶段 #

前端项目发布上线后，并不是万事大吉了，我们仍然需要持续地对我们的项目进行监控，除了产品关心的 PV、UV 这些数据之外，我们研发还需要实时监控接口请求的成功率、白屏报警等异常情况来保障项目的稳定性。同时，有的团队还会收集一些性能数据。

在这个阶段的工程化手段主要有以下内容。

• 埋点平台：统计、分析业务数据，跟踪性能指标。
• 监控平台：观察线上的异常信息，包括接口请求成功率、报错、白屏、流量异常等。

小册由来 #

由以上内容可以看到：从脚手架到监控系统，在每一个阶段都有对应的前端工程体系的解决方案。

也正是基于此，本小册将在现代前端开发的背景下，来给你详细介绍前端工程化的重点内容，包括如何进行模块化、如何设计组件、如何提高代码的复用性、如何提升打包效率、如何做性能优化，等等。

所以，你是想当一个 engineer，还是只是想当一名 developer 呢？