前端工程质量保障体系实践

　　本书从前端开发的完整生命周期角度进行讲解，帮助读者了解前端的工程搭建、版本控制、代码质量、组件建设、测试保障、持续集成、系统部署、页面监控、请求监控、资源保障，以及工程质量优化的相关手段。读完本书，读者可以清楚地了解在不同的阶段有哪些保障工程质量的措施。阅读本书需要具有一定的前端基础知识。本书适合想要了解前端工程化体系搭建知识，以及想扩展自己知识体系的开发者阅读。

　　曾静益，一线前端工程师，本科毕业于电子科技大学，目前在美团工作，长期专注于Web开发，拥有多年的前端工程实践经验，参与过众多大型Web项目的设计与开发，从工程初期的准备工作，到中期的监控与质量保障工作，再到后期的性能优化工作等，积累了丰富的体系化搭建心得，同时也喜爱探索Web前沿技术，活跃于Github开源社区。

目录

01 前端工程质量相关前驱知识 1
1.1 前端工程化简史 1
1.1.1 “原始社会” 1
1.1.2 “石器时代” 2
1.1.3 “铁器时代” 3
1.1.4 “工业化时代” 6
1.1.5 未来的方向——智能化 10
1.2 建立前端工程质量保障体系 12
1.2.1 说明 12
1.2.2 工程搭建 13
1.2.3 版本控制 13
1.2.4 代码质量 14
1.2.5 组件建设 16
1.2.6 测试保障 17
1.2.7 持续集成 17
1.2.8 系统部署 18
1.2.9 页面监控 18
1.2.10 请求监控 19
1.2.11 资源保障 19
1.2.12 工程质量优化 20
参考文献 20
02 工程搭建 22
2.1 类型约束——TypeScript 22
2.1.1 介绍 22
2.1.2 基础知识 23
2.1.3 高级类型 26
2.1.4 项目配置 28
2.2 开发框架——React 32
2.2.1 介绍 32
2.2.2 快速上手 34
2.2.3 路由控制 38
2.2.4 状态管理 43
2.3 CSS处理 46
2.3.1 PostCSS 46
2.3.2 扩展语言 49
2.3.3 样式隔离 50
2.4 构建工具——webpack 52
2.4.1 介绍 52
2.4.2 项目配置 54
参考文献 55
03 版本控制 57
3.1 简介 57
3.2 约定式提交规范 58
3.2.1 介绍 58
3.2.2 结构 59
3.3 分支管理 62
3.3.1 简介 62
3.3.2 分支模式——TBD 63
3.3.3 分支模式——Git-Flow 64
3.3.4 分支模式——GitHub-Flow 67
3.3.5 分支模式——GitLab-Flow 69
3.4 Git Hook 70
3.5 相关工具 72
3.5.1 commitizen 72
3.5.2 husky 73
3.5.3 commitlint 74
3.5.4 conventional-changelog-cli 75
3.6 小结 77
参考文献 77
04 代码质量 78
4.1 简介 78
4.2 代码质量指标 78
4.2.1 主观指标 78
4.2.2 客观指标 79
4.3 代码管理 80
4.3.1 代码规范 80
4.3.2 代码格式化 82
4.3.3 工程目录结构 83
4.3.4 类型约束 85
4.4 接口管理 85
4.4.1 接口mock 85
4.4.2 接口类型约束 88
4.4.3 接口类型自动化 90
4.5 代码质量平台SonarQube 95
4.5.1 简介 95
4.5.2 指标 97
4.5.3 安装和使用 98
4.6 代码托管平台GitLab 98
4.6.1 简介 98
4.6.2 安装 98
参考文献 98
05 组件建设 99
5.1 简介 99
5.2 组件规范 99
5.2.1 设计语言规范 99
5.2.2 研发设计规范 101
5.3 目录结构 102
5.4 样式主题 103
5.5 国际化 104
5.6 组件测试 105
5.7 文档管理 107
5.8 构建打包 108
5.9 发布规范 111
参考文献 113
06 测试保障 114
6.1 简介 114
6.2 测试流程 114
6.2.1 单元测试 114
6.2.2 功能测试 117
6.2.3 集成测试 118
6.2.4 端到端测试 118
6.3 测试方式 119
6.3.1 白盒测试 119
6.3.2 黑盒测试 119
6.4 测试手段 121
6.4.1 手工测试 121
6.4.2 自动化测试 121
6.5 常用测试工具 122
6.5.1 Jest 122
6.5.2 Cypress 127
6.5.3 LambdaTest 132
参考文献 135
07 持续集成 136
7.1 简介 136
7.2 Jenkins 137
7.2.1 简介 137
7.2.2 安装与初始化 137
7.2.3 任务简介 141
7.2.4 配置Webhook 142
7.3 持续集成 145
7.3.1 测试自动化 145
7.3.2 语法检测 147
7.3.3 注释扫描 148
7.3.4 依赖检测 151
7.3.5 自动构建 153
7.4 持续部署 153
08 系统部署 155
8.1 简介 155
8.2 发布类型 156
8.2.1 覆盖式发布 156
8.2.2 非覆盖式发布 157
8.3 资源管理 159
8.3.1 资源加速 159
8.3.2 更新延迟 159
8.4 灰度发布 161
8.4.1 含义 161
8.4.2 A/B测试 162
8.4.3 硬件隔离 163
8.4.4 软件隔离 163
8.5 放量策略 166
8.5.1 百分比放量 166
8.5.2 名单放量 166
8.5.3 自定义放量 167
8.6 发布回滚 167
参考文献 168
09 页面监控 169
9.1 简介 169
9.2 性能监控 169
9.2.1 Performance API 169
9.2.2 核心性能指标 172
9.2.3 其他指标 173
9.3 异常监控 175
9.3.1 错误采集 175
9.3.2 错误处理 179
9.3.3 错误排查 182
9.4 白屏监控 184
9.4.1 白屏分类 184
9.4.2 异常白屏监控 185
9.4.3 实时白屏监控 188
9.5 卡顿监控 191
9.5.1 卡顿分析 191
9.5.2 模拟FPS 193
9.5.3 优化 195
9.6 用户行为监控 196
9.6.1 分析 196
9.6.2 事件监听 197
9.6.3 录制回放 198
参考文献 199
10 请求监控 200
10.1 简介 200
10.2 请求采集 200
10.2.1 请求信息 200
10.2.2 XMLHttpRequest拦截器 202
10.2.3 Fetch拦截器 212
10.2.4 请求过滤 213
10.3 请求类型 214
10.3.1 高并发请求 214
10.3.2 重复请求 216
10.3.3 HTTP状态码异常 218
10.3.4 被取消的请求 219
10.3.5 业务异常请求 221
10.3.6 高延迟请求 222
10.4 爬虫请求 223
10.4.1 介绍 223
10.4.2 识别 224
10.4.3 防御 225
11 资源保障 227
11.1 简介 227
11.2 场景分析 227
11.2.1 DNS劫持 227
11.2.2 HTTP劫持 228
11.2.3 资源加载异常 229
11.3 防劫持保障 230
11.3.1 标记过滤法 230
11.3.2 CSP配置 234
11.3.3 防iframe劫持 239
11.3.4 HTPPS 240
11.4 稳定性保障 242
11.4.1 资源加载监控 242
11.4.2 资源重试 243
11.4.3 域名切换 244
11.4.4 资源离线化 245
参考文献 247
12 工程质量优化 248
12.1 简介 248
12.2 构建优化 248
12.2.1 构建过程分析 248
12.2.2 避免无意义解析 250
12.2.3 使用缓存 254
12.2.4 并行构建 255
12.3 体积优化 257
12.3.1 构建结果分析 257
12.3.2 提取公共代码 258
12.3.3 Tree Shaking 260
12.3.4 代码忽略 262
12.3.5 资源压缩 264
12.3.6 Scope Hoisting 266
12.4 性能优化 268
12.4.1 性能分析 268
12.4.2 CDN加速 271
12.4.3 按需加载 273
12.4.4 预编译优化 276
12.4.5 服务端渲染 279
参考文献 281