前端工程質(zhì)量保障體系實(shí)踐

目錄

01 前端工程質(zhì)量相關(guān)前驅(qū)知識(shí) 1
1.1 前端工程化簡(jiǎn)史 1
1.1.1 “原始社會(huì)” 1
1.1.2 “石器時(shí)代” 2
1.1.3 “鐵器時(shí)代” 3
1.1.4 “工業(yè)化時(shí)代” 6
1.1.5 未來的方向——智能化 10
1.2 建立前端工程質(zhì)量保障體系 12
1.2.1 說明 12
1.2.2 工程搭建 13
1.2.3 版本控制 13
1.2.4 代碼質(zhì)量 14
1.2.5 組件建設(shè) 16
1.2.6 測(cè)試保障 17
1.2.7 持續(xù)集成 17
1.2.8 系統(tǒng)部署 18
1.2.9 頁(yè)面監(jiān)控 18
1.2.10 請(qǐng)求監(jiān)控 19
1.2.11 資源保障 19
1.2.12 工程質(zhì)量?jī)?yōu)化 20
參考文獻(xiàn) 20
02 工程搭建 22
2.1 類型約束——TypeScript 22
2.1.1 介紹 22
2.1.2 基礎(chǔ)知識(shí) 23
2.1.3 高級(jí)類型 26
2.1.4 項(xiàng)目配置 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 擴(kuò)展語(yǔ)言 49
2.3.3 樣式隔離 50
2.4 構(gòu)建工具——webpack 52
2.4.1 介紹 52
2.4.2 項(xiàng)目配置 54
參考文獻(xiàn) 55
03 版本控制 57
3.1 簡(jiǎn)介 57
3.2 約定式提交規(guī)范 58
3.2.1 介紹 58
3.2.2 結(jié)構(gòu) 59
3.3 分支管理 62
3.3.1 簡(jiǎn)介 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 相關(guān)工具 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 小結(jié) 77
參考文獻(xiàn) 77
04 代碼質(zhì)量 78
4.1 簡(jiǎn)介 78
4.2 代碼質(zhì)量指標(biāo) 78
4.2.1 主觀指標(biāo) 78
4.2.2 客觀指標(biāo) 79
4.3 代碼管理 80
4.3.1 代碼規(guī)范 80
4.3.2 代碼格式化 82
4.3.3 工程目錄結(jié)構(gòu) 83
4.3.4 類型約束 85
4.4 接口管理 85
4.4.1 接口mock 85
4.4.2 接口類型約束 88
4.4.3 接口類型自動(dòng)化 90
4.5 代碼質(zhì)量平臺(tái)SonarQube 95
4.5.1 簡(jiǎn)介 95
4.5.2 指標(biāo) 97
4.5.3 安裝和使用 98
4.6 代碼托管平臺(tái)GitLab 98
4.6.1 簡(jiǎn)介 98
4.6.2 安裝 98
參考文獻(xiàn) 98
05 組件建設(shè) 99
5.1 簡(jiǎn)介 99
5.2 組件規(guī)范 99
5.2.1 設(shè)計(jì)語(yǔ)言規(guī)范 99
5.2.2 研發(fā)設(shè)計(jì)規(guī)范 101
5.3 目錄結(jié)構(gòu) 102
5.4 樣式主題 103
5.5 國(guó)際化 104
5.6 組件測(cè)試 105
5.7 文檔管理 107
5.8 構(gòu)建打包 108
5.9 發(fā)布規(guī)范 111
參考文獻(xiàn) 113
06 測(cè)試保障 114
6.1 簡(jiǎn)介 114
6.2 測(cè)試流程 114
6.2.1 單元測(cè)試 114
6.2.2 功能測(cè)試 117
6.2.3 集成測(cè)試 118
6.2.4 端到端測(cè)試 118
6.3 測(cè)試方式 119
6.3.1 白盒測(cè)試 119
6.3.2 黑盒測(cè)試 119
6.4 測(cè)試手段 121
6.4.1 手工測(cè)試 121
6.4.2 自動(dòng)化測(cè)試 121
6.5 常用測(cè)試工具 122
6.5.1 Jest 122
6.5.2 Cypress 127
6.5.3 LambdaTest 132
參考文獻(xiàn) 135
07 持續(xù)集成 136
7.1 簡(jiǎn)介 136
7.2 Jenkins 137
7.2.1 簡(jiǎn)介 137
7.2.2 安裝與初始化 137
7.2.3 任務(wù)簡(jiǎn)介 141
7.2.4 配置Webhook 142
7.3 持續(xù)集成 145
7.3.1 測(cè)試自動(dòng)化 145
7.3.2 語(yǔ)法檢測(cè) 147
7.3.3 注釋掃描 148
7.3.4 依賴檢測(cè) 151
7.3.5 自動(dòng)構(gòu)建 153
7.4 持續(xù)部署 153
08 系統(tǒng)部署 155
8.1 簡(jiǎn)介 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測(cè)試 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
參考文獻(xiàn) 168
09 頁(yè)面監(jiān)控 169
9.1 簡(jiǎn)介 169
9.2 性能監(jiān)控 169
9.2.1 Performance API 169
9.2.2 核心性能指標(biāo) 172
9.2.3 其他指標(biāo) 173
9.3 異常監(jiān)控 175
9.3.1 錯(cuò)誤采集 175
9.3.2 錯(cuò)誤處理 179
9.3.3 錯(cuò)誤排查 182
9.4 白屏監(jiān)控 184
9.4.1 白屏分類 184
9.4.2 異常白屏監(jiān)控 185
9.4.3 實(shí)時(shí)白屏監(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
參考文獻(xiàn) 199
10 請(qǐng)求監(jiān)控 200
10.1 簡(jiǎn)介 200
10.2 請(qǐng)求采集 200
10.2.1 請(qǐng)求信息 200
10.2.2 XMLHttpRequest攔截器 202
10.2.3 Fetch攔截器 212
10.2.4 請(qǐng)求過濾 213
10.3 請(qǐng)求類型 214
10.3.1 高并發(fā)請(qǐng)求 214
10.3.2 重復(fù)請(qǐng)求 216
10.3.3 HTTP狀態(tài)碼異常 218
10.3.4 被取消的請(qǐng)求 219
10.3.5 業(yè)務(wù)異常請(qǐng)求 221
10.3.6 高延遲請(qǐng)求 222
10.4 爬蟲請(qǐng)求 223
10.4.1 介紹 223
10.4.2 識(shí)別 224
10.4.3 防御 225
11 資源保障 227
11.1 簡(jiǎn)介 227
11.2 場(chǎng)景分析 227
11.2.1 DNS劫持 227
11.2.2 HTTP劫持 228
11.2.3 資源加載異常 229
11.3 防劫持保障 230
11.3.1 標(biāo)記過濾法 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
參考文獻(xiàn) 247
12 工程質(zhì)量?jī)?yōu)化 248
12.1 簡(jiǎn)介 248
12.2 構(gòu)建優(yōu)化 248
12.2.1 構(gòu)建過程分析 248
12.2.2 避免無(wú)意義解析 250
12.2.3 使用緩存 254
12.2.4 并行構(gòu)建 255
12.3 體積優(yōu)化 257
12.3.1 構(gòu)建結(jié)果分析 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ù)編譯優(yōu)化 276
12.4.5 服務(wù)端渲染 279
參考文獻(xiàn) 281