前端工程質量保障體系實踐

目錄

01 前端工程質量相關前驅知識 1
1.1 前端工程化簡史 1
1.1.1 “原始社會” 1
1.1.2 “石器時代” 2
1.1.3 “鐵器時代” 3
1.1.4 “工業(yè)化時代” 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 持續(xù)集成 17
1.2.8 系統(tǒng)部署 18
1.2.9 頁面監(jiān)控 18
1.2.10 請求監(jiān)控 19
1.2.11 資源保障 19
1.2.12 工程質量優(yōu)化 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 開發(fā)框架——React 32
2.2.1 介紹 32
2.2.2 快速上手 34
2.2.3 路由控制 38
2.2.4 狀態(tài)管理 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 約定式提交規(guī)范 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 代碼規(guī)范 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 組件規(guī)范 99
5.2.1 設計語言規(guī)范 99
5.2.2 研發(fā)設計規(guī)范 101
5.3 目錄結構 102
5.4 樣式主題 103
5.5 國際化 104
5.6 組件測試 105
5.7 文檔管理 107
5.8 構建打包 108
5.9 發(fā)布規(guī)范 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 持續(xù)集成 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 持續(xù)集成 145
7.3.1 測試自動化 145
7.3.2 語法檢測 147
7.3.3 注釋掃描 148
7.3.4 依賴檢測 151
7.3.5 自動構建 153
7.4 持續(xù)部署 153
08 系統(tǒng)部署 155
8.1 簡介 155
8.2 發(fā)布類型 156
8.2.1 覆蓋式發(fā)布 156
8.2.2 非覆蓋式發(fā)布 157
8.3 資源管理 159
8.3.1 資源加速 159
8.3.2 更新延遲 159
8.4 灰度發(fā)布 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 發(fā)布回滾 167
參考文獻 168
09 頁面監(jiān)控 169
9.1 簡介 169
9.2 性能監(jiān)控 169
9.2.1 Performance API 169
9.2.2 核心性能指標 172
9.2.3 其他指標 173
9.3 異常監(jiān)控 175
9.3.1 錯誤采集 175
9.3.2 錯誤處理 179
9.3.3 錯誤排查 182
9.4 白屏監(jiān)控 184
9.4.1 白屏分類 184
9.4.2 異常白屏監(jiān)控 185
9.4.3 實時白屏監(jiān)控 188
9.5 卡頓監(jiān)控 191
9.5.1 卡頓分析 191
9.5.2 模擬FPS 193
9.5.3 優(yōu)化 195
9.6 用戶行為監(jiān)控 196
9.6.1 分析 196
9.6.2 事件監(jiān)聽 197
9.6.3 錄制回放 198
參考文獻 199
10 請求監(jiān)控 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 高并發(fā)請求 214
10.3.2 重復請求 216
10.3.3 HTTP狀態(tài)碼異常 218
10.3.4 被取消的請求 219
10.3.5 業(yè)務異常請求 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 穩(wěn)定性保障 242
11.4.1 資源加載監(jiān)控 242
11.4.2 資源重試 243
11.4.3 域名切換 244
11.4.4 資源離線化 245
參考文獻 247
12 工程質量優(yōu)化 248
12.1 簡介 248
12.2 構建優(yōu)化 248
12.2.1 構建過程分析 248
12.2.2 避免無意義解析 250
12.2.3 使用緩存 254
12.2.4 并行構建 255
12.3 體積優(yōu)化 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 性能優(yōu)化 268
12.4.1 性能分析 268
12.4.2 CDN加速 271
12.4.3 按需加載 273
12.4.4 預編譯優(yōu)化 276
12.4.5 服務端渲染 279
參考文獻 281