淺談Angular如何借助第三方組件和懶加載技術進行效能優化

相關推薦：《angular教學》

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

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

環境準備

• 全域安裝Angular CLI：npm install -g @angular/cli

• 使用Angular CLI建立一個新專案：ng new spread-sheets-angular-cli

• 下載SpreadJS Npm套件：npm install @grapecity/spread-sheets;npm install @grapecity/spread -sheets-angular

• 在angular.json中配置SpreadJS CS

• 在Angular應用程式中使用SpreadJS

• #使用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編譯等，用好這些技術能讓你的專案效能有所提升，為使用者提供更良好的使用體驗。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是淺談Angular如何借助第三方組件和懶加載技術進行效能優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！