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

目錄

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