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

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

曾静益，一线前端工程师，本科毕业于电子科技大学，目前在美团工作，长期专注于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