課程簡介
《前端基礎建設與工程化設計》課程從項目組織協(xié)同、依賴管理方案、核心技術選型、開發(fā)構建工作流設計、工程化架構思路、持續(xù)集成部署等角度出發(fā)，深度剖析前端基礎建設和工程化架構的現(xiàn)代化方案。
課程中既有優(yōu)秀工程案例分析，也有源碼級深入解讀；既有工具鏈整合方案，也有體系化協(xié)同串聯(lián)。能夠幫助學習者快速理解工程化方案，進而能夠打造自動化、智能化的基礎建設方案，以及順滑流暢的工作流機制。
目標收益
? 理解業(yè)務開發(fā)中很少涉及到的編譯流程
? 從基礎建設和工程化角度，提升開發(fā)效率
? 從基礎建設和工程化角度，優(yōu)化應用性能
? 開拓技術視野，理解現(xiàn)代化前端工程設計方案
? 脫離重復瑣碎的業(yè)務開發(fā)，系統(tǒng)地了解基礎建設的方方面面
? 理解前端構建工具（如 Webpack）實現(xiàn)細節(jié)和原理
? 更好地從零搭建一個優(yōu)秀的項目，整合工作流程
培訓對象
? 3 年以上經(jīng)驗的前端開發(fā)工程師
? 面臨技術瓶頸的前端團隊
? 負責技術方案制定和基礎建設的資深工程師
? 缺少新技術指引、缺少接觸優(yōu)秀項目機會的前端團隊
課程大綱
| 前端編譯原理知識介紹 |
– 解讀 AST（抽象語法樹） – 基于 AST，理解工程化雛形（實踐） |
| 前端生態(tài)和包管理方案解析 |
– NPM 原理解析 ? Yarn 方案介紹 – Package.json 重要字段介紹 |
| 串聯(lián)前端工具，打造自動化流程 |
– 構建工具介紹和方案對比 – 解析 Babel 生態(tài) – Webpack 實踐指南（實踐） – Rollup 實踐指南（實踐） – 動手實現(xiàn)構建工具（實踐） |
| 落地規(guī)范和測試方案，完善基礎建設流程 |
– Lint 方案解析 – 測試方案解析 – 綁定 Git hooks，融合 Prettier, ESLint 以及測試方案（實踐） |
| 抽象基礎建設，提供工程一體化方案 |
– Create-react-app 原理解析 – 實現(xiàn)企業(yè)級腳手架 |
| 現(xiàn)代化工程方案原理介紹和實踐 |
– Tree shaking 優(yōu)化原理和實踐（實踐） – 優(yōu)化代碼分割方案，解析按需加載和打包（實踐） – 解析壓縮和混淆 – 通過構建分析，提升開發(fā)效率和應用性能（實踐） – 無打包方案原理與實踐（實踐） – Monorepo 架構設計 – 漫談 CI/CD 與 DevOps |
|
前端編譯原理知識介紹 – 解讀 AST（抽象語法樹） – 基于 AST，理解工程化雛形（實踐） |
|
前端生態(tài)和包管理方案解析 – NPM 原理解析 ? Yarn 方案介紹 – Package.json 重要字段介紹 |
|
串聯(lián)前端工具，打造自動化流程 – 構建工具介紹和方案對比 – 解析 Babel 生態(tài) – Webpack 實踐指南（實踐） – Rollup 實踐指南（實踐） – 動手實現(xiàn)構建工具（實踐） |
|
落地規(guī)范和測試方案，完善基礎建設流程 – Lint 方案解析 – 測試方案解析 – 綁定 Git hooks，融合 Prettier, ESLint 以及測試方案（實踐） |
|
抽象基礎建設，提供工程一體化方案 – Create-react-app 原理解析 – 實現(xiàn)企業(yè)級腳手架 |
|
現(xiàn)代化工程方案原理介紹和實踐 – Tree shaking 優(yōu)化原理和實踐（實踐） – 優(yōu)化代碼分割方案，解析按需加載和打包（實踐） – 解析壓縮和混淆 – 通過構建分析，提升開發(fā)效率和應用性能（實踐） – 無打包方案原理與實踐（實踐） – Monorepo 架構設計 – 漫談 CI/CD 與 DevOps |
近期公開課推薦
