商品描述
面對AI與數字化浪潮帶來的技術變革，前端研發領域正在從頁面實現走向工程化建設、數據驅動決策與智能化協作。本書以企業級前端研發體系為主線，結合“工程化”“數據化”“智能化”三大必然趨勢，打通“開發—構建—部署—監控—分析—優化”的能力全鏈路，為前端工程師、技術負責人和架構師提供實用的成長路徑與實踐參考。本書內容涵蓋開發規範、框架原理、組件庫建設、工程化工具鏈、自動化測試、數據埋點、構建部署、性能優化、數據分析及研發效能提升等關鍵技術。同時，結合埋點SDK、組件庫、雲構建平臺等真實案例，融入AI輔助編程的前沿實踐。 終，全面呈現前端研發在AI時代的新方法與新範式。
作者簡介
李雅男
頭部大廠前端技術專家，AI驅動前端研發的實踐者。
長期專註於前端工程化建設、架構設計以及覆雜系統開發，具備豐富的技術管理與團隊梯隊建設經驗。
熱衷於開源文化，探索AI在前端研發效能提升中的實際應用。
目錄大綱
前 言
第1章 數字化浪潮中前端的變革 1
1.1 前端開發的發展歷程 1
1.1.1 洪荒時代：Web 1.0 1
1.1.2 青銅時代：Web 2.0 2
1.1.3 黃金時代：移動互聯網 3
1.1.4 現代Web時代 3
1.1.5 未來發展 4
1.2 前端研發的“標準化”流程 4
1.3 現代Web時代對前端開發者的要求 5
第2章 前端開發規範 9
2.1 前端開發規範的意義 10
2.2 開發規範 10
2.2.1 CSS 命名規範 11
2.2.2 JavaScript 命名規範要點 11
2.2.3 接口規範與約定 12
2.2.4 Git規範 12
2.2.5 ESLint使用規範 15
2.2.6 Code Review流程規範 16
2.2.7 上線操作規範 17
2.3 文檔規範 18
第3章 前端框架 20
3.1 前端框架的重要作用 20
3.2 前端框架生態的發展態勢 21
3.3 框架運行的核心原理 22
3.3.1 數據綁定 22
3.3.2 組件化 25
3.3.3 依賴收集 29
3.3.4 虛擬DOM 31
3.3.5 DOM Diff算法 32
3.3.6 模板編譯 34
3.3.7 路由管理 35
3.3.8 插件系統 38
3.3.9 編譯優化 39
第4章 前端庫生態 41
4.1 常用的前端庫 41
4.2 基礎組件庫與業務組件庫的區別 43
4.3 從零編寫一個組件庫 43
4.3.1 項目初始化 43
4.3.2 組件庫的目錄結構 44
4.3.3 樣式解決方案 45
4.3.4 編寫一個組件 46
4.3.5 組件測試 48
4.3.6 組件文檔 49
4.3.7 組件庫打包 51
4.3.8 組件發布 52
第5章 前端工程化核心 54
5.1 JavaScript模塊化 54
5.1.1 模塊化發展歷程 55
5.1.2 JavaScript模塊化的未來 62
5.2 包及包管理器 62
5.2.1 npm倉庫 63
5.2.2 package.json 63
5.2.3 發布npm包 68
5.2.4 安裝npm包 68
5.3 代碼轉譯 74
5.3.1 轉譯原理 74
5.3.2 Babel 78
5.3.3 SWC 80
5.3.4 TSC 81
5.3.5 Sass/Less 84
5.3.6 PostCSS 86
5.4 代碼打包 87
5.4.1 Parcel 88
5.4.2 Rollup 90
5.4.3 Webpack 94
5.4.4 esbuild 96
5.5 代碼壓縮及優化 97
5.5.1 Terser 97
5.5.2 esbuild 99
5.6 代碼檢查 100
5.6.1 項目集成 100
5.6.2 ESLint 101
5.6.3 StyleLint 104
5.7 構建工具 105
5.7.1 Gulp 105
5.7.2 Webpack 105
5.7.3 Vite 107
第6章 自動化測試 111
6.1 為什麼需要前端自動化測試 112
6.2 添加單元測試會降低前端效率嗎 113
6.3 前端測試的主要類型 113
6.4 兩種測試思想 114
6.5 主流測試工具 114
6.6 Jest入門技巧 115
6.6.1 添加Jest 115
6.6.2 Jest異步測試 115
6.6.3 Jest快照 116
6.6.4 Jest的鉤子函數 117
6.6.5 DOM節點 117
6.7 前端自動化測試實踐 117
6.7.1 單元測試案例 118
6.7.2 E2E測試用例 121
6.7.3 單元測試與E2E測試的區別 123
第7章 數據埋點 124
7.1 前端數據埋點的重要性 124
7.2 埋點實現的分類 125
7.2.1 手動埋點 125
7.2.2 可視化埋點 125
7.2.3 全自動埋點 127
7.3 埋點技術原理 127
7.3.1 觸發時機的抽象和實現 127
7.3.2 數據發送的技術實現 129
7.4 埋點數據結構設計 131
7.4.1 事件標識 131
7.4.2 頁面標識 132
7.4.3 用戶標識 133
7.4.4 設備標識 134
7.4.5 網絡標識 134
7.5 開發一款埋點SDK 135
7.5.1 整體設計 135
7.5.2 初始化和配置設計 135
7.5.3 埋點發送設計 137
7.5.4 插件系統設計 139
7.5.5 內置插件實現 141
第8章 前端構建與部署 143
8.1 前端工程部署概覽 143
8.2 Git工作流 143
8.2.1 GitFlow 144
8.2.2 GitHub Flow 146
8.2.3 GitLab Flow 147
8.3 CI/CD工具選擇 148
8.3.1 傳統CI/CD工具 149
8.3.2 自建 CI/CD 平臺 151
8.4 雲構建技術原理 153
8.4.1 雲構建流程 153
8.4.2 Task模塊 154
8.4.3 Git模塊 156
8.4.4 Builder模塊 157
8.4.5 Logger模塊 160
8.5 雲部署技術原理 162
8.5.1 BundleUploader模塊 162
8.5.2 前端版本更新策略 163
8.5.3 前端灰度發布 164
第9章 前端性能優化 165
9.1 前端架構的分層 166
9.1.1 網絡架構 166
9.1.2 端架構 167
9.1.3 前端技術棧 168
9.2 前端性能指標及其測量 169
9.2.1 頁面性能指標 169
9.2.2 性能指標測量 179
9.3 前端性能優化方案 192
9.3.1 前端框架優化 192
9.3.2 媒體資源優化 195
9.3.3 構建優化 199
9.3.4 瀏覽器渲染優化 212
9.3.5 網絡與緩存優化 219
第10章 前端數據分析 228
10.1 前端數據分析全流程 228
10.2 數據建模與表設計 229
10.2.1 ODS接入表 229
10.2.2 DWD明細表 230
10.2.3 DIM維度表 231
10.2.4 DWS匯總表 231
10.2.5 ADS 應用表格 232
10.3 相關指標口徑及算法 232
10.3.1 訪問量 233
10.3.2 曝光率 233
10.3.3 點擊率 234
10.3.4 留存率 234
10.3.5 蹦失率 235
10.3.6 平均停留時長 236
10.4 常用的 SQL 技巧 237
10.4.1 分組與聚合函數 237
10.4.2 多維分組 238
10.4.3 窗口函數 240
10.4.4 使用WITH簡化SQL嵌套 241
10.4.5 使用CASE條件表達式 241
10.4.6 行轉列 242
10.4.7 列轉行 243
10.5 數據可視化與數據分析 243
10.5.1 開源BI解決方案 243
10.5.2 國內商業BI平臺 246
10.5.3 自建可視化報表 248
第11章 研發效能的新思路 252
11.1 研發效能的術與器 252
11.2 效能提升之術 253
11.2.1 敏捷開發 253
11.2.2 什麼是Scrum 253
11.2.3 “3+3+4”執行敏捷開發 254
11.3 提升效能之器 256
11.3.1 項目管理平臺 256
11.3.2 UI-to-code 258
11.3.3 AI輔助編程 259
11.3.4 後臺提效 262
