前端框架Angular 17內建新控制流程語法，並改進延遲載入功能

行動與桌面網頁應用程式開發框架Angular在上個月剛過13歲生日，距離Angular 16發布6個月，遵循主要版本更新節奏，官方於11月準時發布第17個主要版本。這個版本引入了一些重要更新，包括新的模板控制流程語法，簡化過去複雜的結構指令。此外，Angular團隊還加入可延遲檢視（Deferrable Views）新功能，讓開發者能夠簡單地實作延遲載入功能。

Angular 17所新內建的控制流程語法，目的在於改善開發者體驗。這種新語法更符合JavaScript直覺的程式碼編寫風格，降低開發者對文件的依賴，並提供更好的類型檢查。這個概念主要在建置階段運作，可降低執行時占用的空間，減少套件大小約30 KB。這對於需要快速載入的網站和應用程式，特別是在行動裝置上或是網速較慢的地區，將能有效改善用戶體驗，並且提升最大內容繪製、首次輸入延遲和累積佈局偏三個核心網頁指標分數。

新的控制流程包括對條件陳述句的改進，像是新的@if陳述句，能夠用於簡化原有的*ngIf的else陳述句，而@switch陳述句則能改善*ngSwitch的類型細分，另外，Angular 17還推出新的內建for迴圈，透過新的對比演算法提高渲染速度，使其在社群框架基準上達到90％的執行時效能提升。

官方還加入一種稱為可延遲檢視（Deferrable Views）的新功能，來改進延遲載入。這個功能讓開發者可以透過簡單的宣告式程式碼，實現元件的延遲載入，像是在需要的時候，才載入用戶評論列表等。透過@defer陳述句，Angular在編譯時便會自動處理其複雜性，包括尋找元件、指令、建置工作管線、生成動態匯入，以及管理載入和狀態轉換的過程。

此外，可延遲檢視功能還提供多種觸發器，讓開發者能夠實作像是在特定DOM元素進入視窗時才載入元件，或者根據用戶與特定元素的互動開始延遲載入等情境。可延遲檢視還支援預載入相依項目，進一步提升效能和用戶體驗。整體來說，這些功能更新讓原本需要編寫複雜程式碼，和處理各種極端情況的才能執行的工作變得容易，提高程式開發效率。

Angular還對混合渲染體驗進行重大改進，特別是強化了伺服器端渲染和靜態網站生成。現在開發者可以透過新的提示功能，簡單地啟用伺服器端渲染和靜態網站生成。而先前加入的Hydration功能，經過幾個版本的改善，也從開發者預覽階段畢業，現在會於所有使用伺服器端渲染的應用中預設啟用。Hydration是讓伺服器端渲染生成靜態HTML，並於用戶的瀏覽器中，快速變成完全可互動單頁應用程式的過程。

在之前Angular 16所加入的實驗性建置工具Vite和esbuild，現在已經成為預設，這大幅提升了ng serve和ng build指令的效率，官方提到，這是Angular CLI建置工作管線的根本性改進，尤其是在伺服器端渲染方面發揮了重要的功能。

在Angular加入Vite和esbuild後，許多用戶進行了試驗，發現部分應用程式建置速度提升可達67％，因此官方現在將其扶正為預設工具。而且官方這次還更新混合渲染的建置工作管線，開發者現在能看到高達87％的ng build建置速度改善，以及ng serve的編輯與刷新循環速度提高了80％。