前端进阶垫脚石-前端工程化

什么是前端工程化

前端工程化，就是降本提效的体现

广义上，前端工程化包含一切以降低成本、提高效率、保障质量为目的的手段

通过一系列的规范、流程、工具达到研发提效、自动化、保障质量、服务稳定、预警监控等

一个优秀的前端工程师，需要对所开发项目的效率、性能、质量等工程化维度，去制定和实施技术优化指标，只有具备这方面能力，才能应对和优化复杂项目，保证团队高效产出

为什么要进行前端工程化

项目发展过程中，随着项目成员增加，系统复杂度上升，会引发如下问题：

1.系统质量的下降

项目开发人员频繁变更，系统功能新增和迭代，都会导致缺陷的增加，需要通过系统上线前的质量监测来尽早发现问题

为降低系统复杂度，到了一定阶段，对系统进行局部或者整体的架构调整，引入新技术，但也可能引发新问题：

• 部分功能无法与新技术兼容
• 影响面广，可能有缺陷无法及时发现

2.开发效率的下降

系统上线之后，开发工作内容变得复杂，需要关注的事情更多，不停切换不同工作内容，容易遗漏工作步骤，导致流程出现问题，导致系统质量不稳定，技术债务更多，团队开发效率下降

前端工程化，就是要解决如上两大类问题，提升系统质量和开发效率，提升团队的人工投入产出比

如何进行前端工程化

系统质量

设计前端项目

设计项目时，需明确技术选型的影响因素（具体如下），再具体做对应决策

• 项目规模、功能交互

影响框架、工具选型，可考虑使用开源/现有框架，目前三大主流框架包含Angular、Vue、React

• 用户体系

影响兼容性的倾向，比如APP主要群体是老年人，需要考虑旧版本手机的兼容性

• 多人协作、团队规模：考虑完善规范，尽量使用工具保证规范进行* 使用一致的代码开发规范* 使用 Eslint 监测代码规范* 使用 Prettier 自动化格式代码* 使用 Git Commit Hooks 拒绝不符合规范的代码提交* 使用流水线检测出不规范代码，并拒绝合入主干分支，拒绝进入发布流程* 合入代码前，进行 Code Review，遇到分歧时，可通过投票* 制定合适的代码流程规范* 关联需求单/bug 单的分支命名* 检查代码是否符合规范、进行 Code Review* 自动化构建和测试代码* 灰度发布代码* 通过自动化工具确保流程正常进行，比如使用 CI/CD
• 团队技术栈* 考虑团队现有的技术栈、团队成员对框架/工具的熟悉程度，团队成员倾向的框架/工具* 使用团队成员比较熟悉的技术栈，可减少开发问题，提升开发效率* 针对新技术方案，则可通过成员讨论和投票

搭建前端监控体系

搭建前端监控体系是为了及时发现问题，快速定位并解决问题，监控页面整体访问情况包括常见的 PV、UV、用户操作行为，监控页面性能

前端监控需关注的数据

• 系统的生命周期数据：包括页面加载的关键时间点，比如页面打开、更新、关闭等* PerformanceTiming 属性可获取用于页面跳转、加载等数据* document.DOMContentLoader、document.readystatechange，可获取页面加载数据* Vue 的生命周期函数也可进行数据收集* MutationObserver 接口可结合 performance.now() 获取到具体的时间

• HTTP 测速数据PerformanceTiming 属性也可获取 HTTP 请求相关数据，比如 HTTP 跳转开始/结束，域名查询开始/结束等时间戳，用于观察后端服务稳定情况、可优化空间

• 系统异常数据

包括逻辑错误、代码健壮性、网络错误、系统错误、页面内容异常等数据

前4种的异常数据，可用 window.onerror、document.addEvenetListener(error)、XMLHttpRequest status 等方法拦截，第5种异常可通过回归测试、UI 界面测试等方式获取

• 用户行为数据

包括页面浏览点击量、页面停留时间、访问入口、用户操作、用户链路数据，用于监控页面功能是否正常、分析用户行为，定位问题，以便更好地调整产品功能

可通过 DOM 元素的时间监听、页面加载情况

• 用户日志

使用用户日志定位系统异常信息

自动打印日志的方式：添加装饰器、对类方法进行劫持

存放系统输出日志：上报到服务器和本地存储两种方式配合使用

数据采集

• 数据埋点