想盡可能加快 Angular 網站的執行速度和便利性嗎？您找對地方了！
Minko Gechev
什麼是 Angular？
Angular 是一種架構，可用於建立使用者介面。這項服務提供建構模塊，可協助您快速設定可擴充且可擴充的應用程式。開發人員可以透過 Angular，建立可在網路上、行動裝置或電腦上運作的應用程式。
這個系列中有哪些內容？
這個集合著重於最佳化 Angular 應用程式的五個主要領域：
- 改善應用程式的成效，提高使用者轉換和參與度
- 使用 Angular Service Worker 預先快取資產，藉此提高應用程式在品質不佳網路時的可靠性
- 使用預先轉譯和伺服器端算繪功能，讓搜尋引擎和社群媒體機器人易於偵測您的應用程式
- 將應用程式設為可安裝，提供與 iOS/Android 應用程式相似的使用者體驗
- 改善應用程式的無障礙設計，讓所有使用者都能輕鬆操作及使用
系列中的每篇貼文都說明可以直接套用至自家應用程式的技巧。
這個集合「不」包含哪些內容？
這個集合假設您已熟悉 Angular 和 TypeScript。如果您不熟悉這些技術，請參閱 TypeScript 說明文件和 angular.io 的 Angular 指南
啟動專案
Angular 指令列介面 (CLI) 可讓您快速設定簡單的用戶端 Angular 應用程式。這篇文章將簡要介紹 CLI，而集合中的其他貼文則展示如何新增更多進階功能，例如伺服器端轉譯和部署支援。
設定 CLI
首先，請全域安裝 CLI，並執行下列指令，驗證您擁有最新版本：
npm i -g @angular/cli
ng --version
確認上一個指令輸出的是 8.0.3 以上版本。
如果您不想全球安裝 CLI，則可在本機安裝，並透過 npx 指令執行：
npm i @angular/cli
npx ng --version
建立專案
如要建立新專案，請執行：
ng new my-app
這個指令會為您的應用程式建立初始檔案和資料夾結構，並安裝所需的節點模組。
順利完成設定程序後，請執行下列指令來啟動應用程式：
cd my-app
ng serve
您現在應該可在 http://localhost:4200 存取您的應用程式。
後續步驟
本系列的其餘內容會說明如何改善 Angular 應用程式的效能、無障礙功能和 SEO。以下說明涵蓋的內容：
- Angular 中的路徑層級程式碼分割
- 使用 Angular CLI 的效能預算
- Angular 路線預先擷取策略
- Angular 中的變更偵測最佳化
- 使用 Angular CDK 虛擬大型清單
- 使用 Angular Service Worker 進行預先快取
- 使用 Angular CLI 預先算繪路徑
- 使用 Angular Universal 的伺服器端算繪
- 使用 Angular CLI 新增網頁應用程式資訊清單
- 使用 Codelyzer 進行無障礙功能稽核