Uploaded byWill Huang
Angular 4 網站開發最佳實務 (Modern Web 2017)
此文档分享了Angular 4在网站开发的最佳实践，包括使用Visual Studio Code与Angular CLI、推荐的扩展以及如何优化Angular应用绩效。探讨了变更检测策略、模块化应用及延迟加载等主题，并提供了具体代码示例和指令。此外，强调了遵循Angular风格指南和使用工具如source-map-explorer来提高开发效率与代码质量。
Angular 4 網站開發最佳實務 (Modern Web 2017)
- 1. AngularJS User Group Taiwan Angular4 網站開發最佳實務 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/
- 2. AngularJS User Group Taiwan 善用VSCode 與 Angular CLI https://github.com/angular/angular-cli/tree/1.3.x
- 3. AngularJS User Group Taiwan 請認明Will 保哥 出品 Angular Extension Pack 擴充套件 使用 Visual Studio Code 擴充套件 唯一推薦
- 4. AngularJS User Group Taiwan AngularLanguage Service • 提供範本中所有必要的 IntelliSense 支援 angular2-switcher • 快速鍵：Alt-o (快速切換於元件與範本之間) • 快速鍵：F12 (移至定義) (可在範本中使用) TypeScript Toolbox • 建議設定: "genGetSet.spacedImportLine": true Angular v4 TypeScript Snippets • 大量的程式碼片段 for Angular, TypeScript 與 HTML • 所有程式碼快捷鍵都是 a- 開頭 Angular Extension Pack 的亮點 1
- 5. AngularJS User Group Taiwan TSLint •記得將 tslint.autoFixOnSave 選項開啟 (超省時) • 不用時可直接在 Settings 暫時關閉 TSLint 檢查 Auto Rename Tag • 自動幫你修改頭尾的 HTML 標籤 (但有時候會出錯) JSON to TS • 快速鍵：Ctrl-Alt-V (轉換剪貼簿 JSON 定義) • 快速鍵：Ctrl-Alt-S (轉換選取的 JSON 定義) Document This • 連按 Ctrl+Alt+D 兩次就會產生註解範本！ Angular Extension Pack 的亮點 2
- 6. AngularJS User Group Taiwan https://angular.io/guide/styleguide •每個檔案只放一個元件 • 每個檔案不超過 400 行，每個函式不超過 75 行 • 命名不要用 dash 也不要偷懶用縮寫 • …… 有空就認真看一遍 沒空就用 Angular CLI • ng generate 產生程式碼骨架 • ng lint 檢查程式碼撰寫風格 ( codelyzer ) 遵循 Angular Style Guide 指引方針
- 7. AngularJS User Group Taiwan 更新全域npm • npm install -g @angular/cli 更新專案 npm • npm install @angular/cli --save-dev • rimraf node_modules package-lock.json • npm install 也盡量使用最新版的 Angular 套件！ • 用上述升級 Angular CLI 的步驟就會自動升版 使用最新版的 Angular CLI 命令列工具
- 8. AngularJS User Group Taiwan 樣板指令 Alias 用法 Module ng g m my-module Component ng g c my-new-component Directive ng g d my-new-directive Service ng g s my-new-service Pipe ng g p my-new-pipe Guard ng g g my-new-guard Enum ng g e my-new-enum Interface ng g i my-new-interface Class ng g cl my-new-class 使用 Alias 快速建立元件
- 9. AngularJS User Group Taiwan --build-optimizer(Angular Build Optimizer) • 可大幅減少 Bundle 後的檔案大小 (專案越大越明顯) • 目前為實驗性功能 (需額外加上 --build-optimizer 選項) • 建置過程會比 --prod 多出一倍時間 --named-chunks feat(@angular/cli): name lazy • 讓延遲載入的子路由模組可用「模組名稱」當成檔名 • 預設在 dev 環境就是啟用的 • 這是 webpack v2.4.0 的新功能 關於 --dev 與 --prod builds 的預設值 • --dev vs --prod builds 體驗最新最酷的建置功能 ( ng build )
- 10. AngularJS User Group Taiwan ngbuild 與 ng build --prod
- 11. AngularJS User Group Taiwan ngbuild -prod --build-optimizer
- 12. AngularJS User Group Taiwan Angular官網加上 --build-optimizer
- 13. AngularJS User Group Taiwan ngbuild -prod --named-chunks
- 14. AngularJS User Group Taiwan 網站伺服器都會壓縮靜態檔案 (gzip / deflate ) 實際下載大小會比看見的小很多
- 15. AngularJS User Group Taiwan 安裝source-map-explorer 工具 • npm install -g source-map-explorer 分析透過 webpack 打包過的檔案 • ng build • source-map-explorer dist/vendor*.js • ng build -prod -sm • source-map-explorer dist/vendor*.js • ng build -prod -sm --build-optimizer • source-map-explorer dist/vendor*.js 分析 Bundle 過的原始碼
- 16. AngularJS User Group Taiwan 效能調校Angular 應用程式 Performance Optimization
- 17. AngularJS User Group Taiwan Angular應用程式是由元件組成的 每一個元件裡儲存著許多內部狀態 ( 狀態就是屬性 ) 內部狀態可以是任何類型的物件 (原始型別/物件型別) 元件的內部狀態經常與網頁的 使用者介面 (View) 相關 關於 Angular 應用程式狀態
- 18. AngularJS User Group Taiwan 先獲取應用程式內部狀態 判斷出應用程式狀態是否發生變更 將新的應用程式內部狀態反應到View 上 在瀏覽器中就是將應用程式狀態反映到 DOM 物件上 變更偵測的基本任務
- 19. AngularJS User Group Taiwan 常見的狀態變更原因 •DOM 事件 - click, change, input, … • XMLHttpRequest - 從遠端伺服器抓取資料 • Timers - setTimeout(), setInterval() 這些都是 非同步操作 (async) 每當非同步操作執行完成，應用程式狀態就可能發生改變 此時就需要通知 View 更新 (DOM Update) 觸發變更偵測的情境
- 20. AngularJS User Group Taiwan 每個元件都可以定義自己的變更偵測策略 •ChangeDetectionStrategy.Default • 變更偵測會在每一次非同步事件發生時執行 • ChangeDetectionStrategy.OnPush • 變更偵測會在當元件中有 @Input() 屬性資料變更時執行 每次變更偵測作業都會從根元件開始執行 關於 Angular 的變更偵測策略
- 21. AngularJS User Group Taiwan 變更偵測樹(Change Detection Tree)
- 22.
- 23.
- 24. AngularJS User Group Taiwan 元件中的@Input() 屬性有變更才會進行變更偵測 若屬性參考沒有任何改變，則會跳過變更偵測 包含所有子元件都會跳過變更偵測 多利用 OnPush 變更偵測策略
- 25. AngularJS User Group Taiwan http://bit.ly/stackblitz-angular-debug 避免在Angular 範本中執行函式 (包含 getter 函式) • {{ debug() }} • 計算 Angular Expression 的執行次數 • 實驗 document.onmousemove 如何影響效能 正式環境記得呼叫 enableProdMode(); 函式 • 變更偵測次數會從 2 降到 1 (效能提升) 計算變更偵測次數
- 26. AngularJS User Group Taiwan http://bit.ly/stackblitz-angular-pure-pipes 所有Pipes 元件預設為 Pure Pipes • 唯有屬性參考發生改變，才會執行 Pipes 轉換 • 考慮使用 Immutable.js 若將 Pipe 元件改為「不純」的 Pipe 元件 • 每次變更偵測都會執行一遍 Pipes 轉換 謹慎使用 Pipes 元件
- 27. AngularJS User Group Taiwan http://bit.ly/stackblitz-angular-ngfor-trackby 使用*ngFor 跑迴圈時 • 可利用 trackBy 選項減少 DOM 更新次數 (效能提升) • 這裡的 trackBy 只能接受一個函式 (簡稱 trackByFn 函式) • 自訂的 trackByFn 函式可以接受兩個參數 • index • item • 只要有提供 trackBy 設定，就會依據 trackByFn 函式的 回傳值才決定是否更新該筆資料在頁面上的 DOM 物件 使用 TrackBy 避免不必要的 DOM 操作
- 28. AngularJS User Group Taiwan constructor(privatecd: ChangeDetectorRef) { this.cd.detach(); setInterval(() => { this.cd.detectChanges(); }, 5000); } 關閉變更偵測
- 29. AngularJS User Group Taiwan 模組化Angular 應用程式 Modularization
- 30. AngularJS User Group Taiwan 1.全部載入 (預設) • 將所有模組打包成 1 個 JS 檔案 2. 延遲載入 • 將部分模組拆解成可延遲載入的程式片段 (chunks) • 主動擊進入特定路由，延遲載入的模組才會即時載入 3. 預先載入 • 將部分模組拆解成可延遲載入的程式片段 (chunks) • 預先載入的過程透過非同步背景下載所有子路由模組 • 下載過程不影響畫面顯示或使用者操作 多利用子路由模組達成延遲載入
- 31. AngularJS User Group Taiwan 把用不到的模組通通移除 •FormsModule, HttpModule, … 所有的路由頁面都透過延遲載入，確保首頁載入最快！ • Lazy loading 把需要在第一頁顯示的 Components 封裝在一個模組裡 • 要避免元件重複註冊 規劃模組載入的三個原則
- 32. AngularJS User Group Taiwan 錯誤示範 •import 'rxjs'; 正確寫法 • import { Observable } from 'rxjs/Observable'; • import 'rxjs/add/operator/switchMap'; • import 'rxjs/add/operator/map'; 不要 import 用不到的 JS 模組
- 33.
- 34. AngularJS User Group Taiwan http://bit.ly/stackblitz-angular-async-pipe 多利用AsyncPipe 自動訂閱傳入元件的觀察者物件 • {{ data | async | json }} • {{ obj | json }} 不要在頁面元件中訂閱觀察者物件
- 35. AngularJS User Group Taiwan http://angular.tw(Angular User Group Taiwan) https://forum.angular.tw/ ( 台灣 Angular 技術論壇 ) Angular Extension Pack - Visual Studio Marketplace Angular Best Practices - August 2017 Edition Optimizing the Performance of Your Angular Apps Best Practices - STEPHEN FLUIN - YouTube angular-cli/build.md at 1.3.x · angular/angular-cli 相關連結
- 36.
- 37. AngularJS User Group Taiwan TheWill Will Web 記載著 Will 在網路世界的學習心得與技術分享 • http://blog.miniasp.com/ Will 保哥的技術交流中心 (臉書粉絲專頁) • http://www.facebook.com/will.fans Will 保哥的噗浪 • http://www.plurk.com/willh/invite Will 保哥的推特 • https://twitter.com/Will_Huang 聯絡資訊
Editor's Notes
- #5 https://pixabay.com/zh/%E5%A5%B3%E5%AD%90-%E6%9E%84%E6%88%90-%E7%94%B5%E5%AD%90%E5%AD%A6%E4%B9%A0-%E5%A5%B3%E6%80%A7-%E5%A5%B3%E5%AD%A9-%E4%BA%BA-%E9%AB%98%E5%8A%A0%E7%B4%A2-%E5%85%B4%E5%A5%8B-1401616/
- #6 https://pixabay.com/zh/%E5%A5%B3%E5%AD%90-%E6%9E%84%E6%88%90-%E7%94%B5%E5%AD%90%E5%AD%A6%E4%B9%A0-%E5%A5%B3%E6%80%A7-%E5%A5%B3%E5%AD%A9-%E4%BA%BA-%E9%AB%98%E5%8A%A0%E7%B4%A2-%E5%85%B4%E5%A5%8B-1401616/
- #10 https://github.com/angular/angular-cli/issues/5244
- #18 https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354
- #19 https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354
- #21 Default Default means that the change detector’s mode will be set to CheckAlways during hydration. OnPush OnPush means that the change detector’s mode will be set to CheckOnce during hydration.
- #22 https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354
- #23 https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354
- #24 如果元件中套用 @Input() 的屬性沒有任何改變，Angular 會跳過變更偵測 (含所有子元件都會跳過) https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354
- #26 The problem is, because Angular needs to re-run your function in every change detection cycle, if the function performs expensive tasks, it can be costly. Angular Guide - Pipes https://angular.io/guide/pipes
- #27 The problem is, because Angular needs to re-run your function in every change detection cycle, if the function performs expensive tasks, it can be costly. Angular Guide - Pipes https://angular.io/guide/pipes
- #28 https://stackoverflow.com/questions/36322829/how-to-use-track-by-inside-ngfor-angular-2
- #34 https://zh.wikipedia.org/wiki/%E5%8F%8D%E9%9D%A2%E6%A8%A1%E5%BC%8F