前端宝典十一：前端工程化稳定性方案

一、工程化体系介绍

1、什么是前端工程化

• 前端工程化 = 前端 + 软件工程；
• 前端工程化 = 将工程方法系统化地应用到前端开发中；
• 前端工程化 = 系统、严谨、可量化的方法开发、运营和维护前端应用程序；
• 前端工程化 = 基于业务诉求，梳理出最符合当前需要的架构设计；
  软件工程：将工程方法系统化地软件工程应用到软件开发中；
  工程方法：以系统、严谨、可量化的方法开发、运营和维护软件；

2、前端工程化发展

1. 前后端分离：B/S架构兴起，有了前后端之分；
2. 模块化：随着前端复杂度上升，模块复用、实践规范重要性提升；
3. 自动化：管理&简化前端开发过程，前端框架、自动化、构建系统应运而生；
4. 最佳实践：基于行业内最佳实践，开箱即用的框架（dva）、工具体系逐渐建立起来；
5. 好、快、稳：依赖vite、esm、wasm、低代码等能力；

二、项目开发全流程

项目全流程包含5个阶段：
评审阶段、准备阶段、开发阶段、发布交付阶段、产后阶段

1、评审阶段

该阶段主要包括：

1. 项目立项
2. 编写需求
3. 需求评审
4. 开发设计、开发设计评审
5. 视觉交互评审

2、准备阶段

该阶段主要包括：

1. 新建仓库
2. 构建或选择脚手架
3. 项目初始化

3、开发阶段

该阶段主要包括：

1. 开发／打包配置
2. 本地mock
3. 业务实现
4. 单元测试

4、发布交付阶段

该阶段主要包括：

1. git commit规范；
2. changeLog规范；
3. 打包构建；
4. 部署、验收；

5、产后阶段

该阶段主要包括：

1. 错误监控
2. 数据分析

开发全流程的5个阶段，最终目的是确保需求按期上线，且上线后正常运行，没有生产问题，但是前端页面上线后需要有工程化工具来进行打分，也就是用户体验度量。

三、体验度量

1、体验度量要解决的问题

上图是度量面临的问题，针对这些问题，我们通过体验度量想要达到的目标是：

2、体验度量设计

上图中的FCP、LCP是通过前端性能监控工具performance给出的重要指标，我们会专门针对性能监控开一篇。

同时像error上报、用户基础数据日志上报、埋点事件、访问上报、卡顿率等指标都是用来评价前端页面性能的，这样可以让体验度量具像化。

四、规范流程