Angular效能優化實踐——巧用第三方元件和懶載入技術

葡萄城技術團隊發表於2021-02-20
Angular優化元件

 

應該有很多人都抱怨過 Angular 應用的效能問題。其實，在搭建Angular專案時，通過使用打包、懶載入、變化檢測策略和快取技術，再輔助第三方元件，便可有效提升專案效能。

 

為了幫助開發者深入理解和使用Angular，本文將以我司客戶中最為典型的業務場景——線上表格編輯為例，演示如何藉助懶載入技術，在基於 Angular的框架中實現線上匯入匯出Excel以及資料線上填報的功能。

 

環境準備

 

  1. 全域性安裝Angular CLI：npm install -g @angular/cli
  2. 使用Angular CLI建立一個新專案：ng new spread-sheets-angular-cli
  3. 下載SpreadJS Npm包：npm install @grapecity/spread-sheets;npm install @grapecity/spread-sheets-angular
  4. 在angular.json中配置SpreadJS CS
  5. 在Angular應用程式中使用 SpreadJS
  6. 使用Angular CLI構建和執行專案

 

完成上述環境搭建，便可將表格編輯器元件整合到 Angular 專案中，實現線上匯入匯出Excel以及資料線上填報等功能。

在開始優化之前，我們先來分析一下是什麼因素影響了專案的效能。

 

影響專案效能的因素

在整合 SpreadJS 表格元件後，專案的公式資料處理速度符合預期，頁面在執行也較為流暢。但是釋出後，使用者開啟頁面在載入時間上要比開發環境有所延長，帶來的使用者體驗較差。經過調研，發現在Angular的預設中，NgModule都是急性載入的，也就是會在應用載入時儘快載入。無論是否要立即使用，所有模組都會一併載入。

 

因此，對於多路由的大型應用，建議採用懶載入——按需載入的NgModule的模式。通過懶載入可以減少初始包的尺寸，從而減少載入時間。

 

什麼是懶載入？

在Web應用程式中，系統的瓶頸常在於系統的響應速度。如果系統響應速度過慢，使用者就會出現埋怨情緒，系統的價值也因此會大打折扣。懶載入會在首次載入時，將必須的模組載入，而其餘暫時用不到的模組則不會載入。例如在商城系統中，使用者開啟首頁時，只需展示商品，此時用不上支付模組，所以支付模組就可以使用懶載入技術。

 

專案優化

1. 劃分業務模組

要懶載入Angular模組，需要在AppRoutingModule routes中使用loadchildren替代component進行配置。

 

 

 

 

在懶載入模組的路由模組中，新增一個指向該元件的路由。本次的demo存在兩個懶載入的模組。

 

 

 

 

 

 

 

2. 建立導航UI

雖然可以直接在位址列直接輸入URL，但是有導航UI會更好用。三個a標籤分別代表主頁以及兩個需要懶載入的模組。

 

 

 

 

3. 匯入與路由配置

CLI會將每個特性模組自動新增到應用級的路由對映表中，最後通過新增預設路由來最終完成。

 

 

 

4. 特性模組內部

 

 

 

我們到lazy-webexcel.module.ts檔案看下，匯入了lazy-webexcel-routing.module.ts和lazy-webexcel.component.ts檔案。@NgModule的imports陣列列出了LazyWebExcelRoutingModule，讓LazyWebExcelModule可以訪問他自己的路由模組。另外，LazyWebExcelComponent屬於LazyWebExcelModule。

 

 

 

 

設定path為空，因為AppRoutingModule 中的路徑已經設定了，LazyWebExcelRoutingModule中的此路由已經位於lazywebexcel這個上下文中。另一個模組配置也類似，因此不再贅述。

 

5. 確認它正常工作

我們可以通過Chrome的開發者工具的網路頁標籤來確認這些模組是否懶載入。點選Designer Component LazyLoad，可以看到下圖的檔案出現，表示準備就緒，特性模組被惰性載入成功。

 

 

 

總結

經過優化，首屏載入時間能得到有效的降低。另外，再說一下forRoot和forChild。CLI會把RouterModule.forRoot(routes)新增到AppRoutingModule的imports 陣列中。這會讓Angular知道AppRoutingModule是一個路由模組，而 forRoot() 表示這是根路由模組。它會配置傳入的所有路由、讓你能訪問路由器指令並註冊 Router。

 

CLI 還會把 RouterModule.forChild(routes) 新增到各個特性模組中。這種方式下 Angular 就會知道這個路由列表只負責提供額外的路由並且其設計意圖是作為特性模組使用。你可以在多個模組中使用 forChild()。

 

以上就是 SpreadJS結合Angular框架，並藉助懶載入技術優化線上Excel專案的主要過程。除了懶載入，Angular還提供了很多效能優化方式，如瀏覽器快取策略、RxJS、Tree Shaking、使用AoT編譯等，用好這些技術能讓你的專案效能有所提升，為使用者提供更良好的使用體驗。

相關文章