開始使用:最佳化 Angular 應用程式

想盡可能加快網站速度和存取便利性嗎?您找對地方了!

什麼是 Angular?

Angular 是建構使用者介面的架構。它提供構成元素,可協助您快速設定可維護且可擴充的應用程式。透過 Angular,開發人員可建立可用於網頁、行動裝置或電腦上的應用程式。

這個集合中包含哪些內容?

本系列文章著重在最佳化 Angular 應用程式的五個主要領域:

  • 改善應用程式的成效,提高使用者轉換率和參與度
  • 使用 Angular 服務工作站預先快取資產,提高應用程式的穩定性,改善不良網路時的穩定性
  • 運用預先轉譯和伺服器端轉譯功能,讓搜尋引擎和社群媒體機器人能找到您的應用程式
  • 讓應用程式可安裝,提供與 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 進行無障礙功能稽核