123,123

內(nèi)容簡(jiǎn)介

　　本書從前端開發(fā)的完整生命周期角度進(jìn)行講解，幫助讀者了解前端的工程搭建、版本控制、代碼質(zhì)量、組件建設(shè)、測(cè)試保障、持續(xù)集成、系統(tǒng)部署、頁(yè)面監(jiān)控、請(qǐng)求監(jiān)控、資源保障，以及工程質(zhì)量?jī)?yōu)化的相關(guān)手段。讀完本書，讀者可以清楚地了解在不同的階段有哪些保障工程質(zhì)量的措施。閱讀本書需要具有一定的前端基礎(chǔ)知識(shí)。本書適合想要了解前端工程化體系搭建知識(shí)，以及想擴(kuò)展自己知識(shí)體系的開發(fā)者閱讀。

作者簡(jiǎn)介

　　曾靜益，一線前端工程師，本科畢業(yè)于電子科技大學(xué)，目前在美團(tuán)工作，長(zhǎng)期專注于Web開發(fā)，擁有多年的前端工程實(shí)踐經(jīng)驗(yàn)，參與過眾多大型Web項(xiàng)目的設(shè)計(jì)與開發(fā)，從工程初期的準(zhǔn)備工作，到中期的監(jiān)控與質(zhì)量保障工作，再到后期的性能優(yōu)化工作等，積累了豐富的體系化搭建心得，同時(shí)也喜愛探索Web前沿技術(shù)，活躍于Github開源社區(qū)。

圖書目錄

目錄

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 避免無意義解析 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