效能

Angular 開箱就內建許多最佳化，但隨著應用程式成長，你可能需要微調應用程式的載入速度，以及使用時的流暢感受。這些指南涵蓋 Angular 提供的工具與技巧，協助你打造快速的應用程式。

載入效能

載入效能決定你的應用程式多快變得可見且可互動。載入緩慢會直接影響 Core Web Vitals，例如 Largest Contentful Paint（LCP）與 Time to First Byte（TTFB）。

技巧	作用	使用時機
延遲載入的路由	把路由元件延後到導航時才載入，減少初始套件大小	有多條路由、且並非所有路由在初始載入時都需要用到的應用程式
用 `@defer` 延遲載入	把元件拆成各自的套件，依需求載入	初始渲染時看不到的元件、龐大的第三方程式庫、頁面下方的內容
用 `injectAsync` 延遲載入服務	把不常用的服務拆成各自的區塊，依需求載入	背後是大型程式庫的服務，或不常使用的功能
圖片最佳化	優先處理 LCP 圖片、延遲載入其他圖片，並產生響應式的 `srcset` 屬性	任何會顯示圖片的應用程式
伺服器端渲染	在伺服器上渲染頁面，帶來更快的首次繪製與更好的 SEO，並透過水合（hydration）恢復互動性，再以漸進式水合把各區段的水合延後到需要時才做	內容為主的應用程式、需要被搜尋引擎索引的頁面

執行期效能決定應用程式載入後操作起來是否流暢。Angular 的變更偵測系統會讓 DOM 與你的資料保持同步，而最佳化它執行的方式與時機，正是改善執行期效能的主要著力點。

技巧	作用	使用時機
無 Zone 變更偵測	移除 ZoneJS 的額外負擔，只在訊號或事件顯示有變更時才觸發變更偵測	新應用程式（Angular v21 以上預設），或已準備好遷移的既有應用程式
緩慢的計算	找出並最佳化昂貴的範本運算式與生命週期鉤子	效能分析顯示特定元件造成變更偵測週期緩慢時
略過元件子樹	使用 `OnPush` 變更偵測來略過未變更的元件樹	需要更精細控制變更偵測的應用程式
Zone 污染	防止第三方程式庫或計時器造成不必要的變更偵測	分析顯示變更偵測週期過多的 Zone 架構應用程式

找出該最佳化什麼，和知道如何最佳化同樣重要。Angular 與瀏覽器開發人員工具整合，協助你找出瓶頸。

工具	作用
Chrome DevTools 效能分析	連同瀏覽器的效能分析，一起記錄 Angular 專屬的效能資料，並以色彩標示的火焰圖呈現元件渲染、變更偵測週期與生命週期鉤子
Angular DevTools	瀏覽器擴充功能，提供元件樹檢視器與分析工具，用來視覺化變更偵測週期

如果你不確定該從何下手，先用 Chrome DevTools 的 Angular 追蹤分析你的應用程式，找出具體的瓶頸。

一般的起點如下：

初始載入緩慢：用 @defer 把大型元件拆出主套件，用 NgOptimizedImage 優先處理頁面上方的圖片，並用伺服器端渲染更快地傳遞內容。
載入後互動緩慢：檢查是否已啟用無 Zone 變更偵測，查看範本或生命週期鉤子中是否有緩慢的計算，並考慮用 OnPush 減少不必要的變更偵測。