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

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

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

鸟瞰前端工程的全生命研发周期

快速搭建强鲁棒性的现代前端工程化体系

前端从最初的单纯关注静态页面开发，逐步发展至框架、工具层出不穷的阶段，与诸多前端开发工程师付出的汗水和努力密不可分。在这个过程中，前端领域遇到了大量前所未有的问题，也随之涌现了各种各样的解决方案。经过这几年的井喷式发展，前端领域已经完成了能力上的补足：React、Angular、Vue等前端框架替换了传统的 jQuery，研发的效率和质量得到了进一步提升；Less、Scss等扩展语言增强了CSS，开始支持函数、变量等功能；webpack、Rollup等工具赋予了工程打包能力，开发者不需要在与构建相关的工作上再投入大量的精力；React Native、Weex、Electron 等跨平台方案让前端的能力辐射到客户端，突破了传统网页应用的定义……随着前端应用复杂度的提升，企业和个人对前端工程质量的诉求与以往也不可再同日而语。

本书第1章介绍前端的发展历史，讲述前端如何从后端中独立出来，并逐步走向工程化。第2章讲解在前端项目启动前需要做的准备工作。第3章介绍如何规范使用 Git 进行版本控制，从而有效提高多人协作的开发效率。第4章系统地介绍对代码质量进行工程化管理的方法。第5章从组件规范、目录结构、样式主题、国际化、组件测试、文档管理、构建打包及发布规范8个方面介绍高质量的组件是如何建设的。第6章介绍前端工程中测试环节涉及的内容。第7章介绍持续集成中保障质量的手段。第8章主要介绍如何部署稳定、高效的系统。第9章介绍性能监控、异常监控、白屏监控、卡顿监控及用户行为监控等常用的页面监控手段。第10章讲解请求监控的常用手段与识别以及防御爬虫的方法。第11章介绍资源保障的必要性和通用手段。第12章讲解 webpack 在打包构建中常用的优化手段。

读者可以访问https://github.com/ShanaMaid/fe-project-quanlity获取本书示例的源码。

本书的完成需要感谢在各个方面给予我支持和帮助的人，感谢我的同事时允、李杨韬、吴浩麟，他们提出了很多宝贵的意见；感谢电子工业出版社博文视点的编辑张晶，她在编辑和审校本书期间提出了宝贵的意见；最后，特别感谢我的妻子苟媛媛陪伴着我，在我创作本书期间给予的宽容和支持。

如果你在阅读本书中遇到任何问题和疑惑，可以通过邮箱[email protected]进行反馈。由于作者的水平有限，本书或多或少存在不足之处，欢迎广大读者批评指正。

最后，希望本书能够帮助读者建立属于自己的知识体系，在前端的道路上越走越稳，越走越顺，越走越远！

曾静益

2022年3月

目录



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