建站
咨詢
售后
建站咨詢
新聞中心
應(yīng)該有很多人都抱怨過 Angular 應(yīng)用的性能問題。其實，在搭建Angular項目時，通過使用打包、懶加載、變化檢測策略和緩存技術(shù)，再輔助第三方組件，便可有效提升項目性能。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供精河網(wǎng)站建設(shè)、精河做網(wǎng)站、精河網(wǎng)站設(shè)計、精河網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、精河企業(yè)網(wǎng)站模板建站服務(wù)，十載精河做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
為了幫助開發(fā)者深入理解和使用Angular，本文將以我司客戶中最為典型的業(yè)務(wù)場景——在線表格編輯為例，演示如何借助懶加載技術(shù)，在基于 Angular的框架中實現(xiàn)在線導(dǎo)入導(dǎo)出Excel以及數(shù)據(jù)在線填報的功能。
環(huán)境準(zhǔn)備
- 全局安裝Angular CLI：npm install -g @angular/cli
- 使用Angular CLI創(chuàng)建一個新項目：ng new spread-sheets-angular-cli
- 下載SpreadJS Npm包：npm install @grapecity/spread-sheets;npm install @grapecity/spread-sheets-angular
- 在angular.json中配置SpreadJS CS
- 在Angular應(yīng)用程序中使用 SpreadJS
- 使用Angular CLI構(gòu)建和運(yùn)行項目
完成上述環(huán)境搭建，便可將表格編輯器組件集成到 Angular 項目中，實現(xiàn)在線導(dǎo)入導(dǎo)出Excel以及數(shù)據(jù)在線填報等功能。
在開始優(yōu)化之前，我們先來分析一下是什么因素影響了項目的性能。
影響項目性能的因素
在集成 SpreadJS 表格組件后，項目的公式數(shù)據(jù)處理速度符合預(yù)期，頁面在運(yùn)行也較為流暢。但是發(fā)布后，用戶打開頁面在加載時間上要比開發(fā)環(huán)境有所延長，帶來的用戶體驗較差。經(jīng)過調(diào)研，發(fā)現(xiàn)在Angular的默認(rèn)中，NgModule都是急性加載的，也就是會在應(yīng)用加載時盡快加載。無論是否要立即使用，所有模塊都會一并加載。
因此，對于多路由的大型應(yīng)用，建議采用懶加載——按需加載的NgModule的模式。通過懶加載可以減少初始包的尺寸，從而減少加載時間。
什么是懶加載？
在Web應(yīng)用程序中，系統(tǒng)的瓶頸常在于系統(tǒng)的響應(yīng)速度。如果系統(tǒng)響應(yīng)速度過慢，用戶就會出現(xiàn)埋怨情緒，系統(tǒng)的價值也因此會大打折扣。懶加載會在首次加載時，將必須的模塊加載，而其余暫時用不到的模塊則不會加載。例如在商城系統(tǒng)中，用戶打開首頁時，只需展示商品，此時用不上支付模塊，所以支付模塊就可以使用懶加載技術(shù)。
項目優(yōu)化
1. 劃分業(yè)務(wù)模塊
要懶加載Angular模塊，需要在AppRoutingModule routes中使用loadchildren替代component進(jìn)行配置。
在懶加載模塊的路由模塊中，添加一個指向該組件的路由。本次的demo存在兩個懶加載的模塊。
2. 建立導(dǎo)航UI
雖然可以直接在地址欄直接輸入URL，但是有導(dǎo)航UI會更好用。三個a標(biāo)簽分別代表主頁以及兩個需要懶加載的模塊。
3. 導(dǎo)入與路由配置
CLI會將每個特性模塊自動添加到應(yīng)用級的路由映射表中，最后通過添加默認(rèn)路由來最終完成。
4. 特性模塊內(nèi)部
我們到lazy-webexcel.module.ts文件看下，導(dǎo)入了lazy-webexcel-routing.module.ts和lazy-webexcel.component.ts文件。@NgModule的imports數(shù)組列出了LazyWebExcelRoutingModule，讓LazyWebExcelModule可以訪問他自己的路由模塊。另外，LazyWebExcelComponent屬于LazyWebExcelModule。
設(shè)置path為空，因為AppRoutingModule 中的路徑已經(jīng)設(shè)置了，LazyWebExcelRoutingModule中的此路由已經(jīng)位于lazywebexcel這個上下文中。另一個模塊配置也類似，因此不再贅述。
5. 確認(rèn)它正常工作
我們可以通過Chrome的開發(fā)者工具的網(wǎng)絡(luò)頁標(biāo)簽來確認(rèn)這些模塊是否懶加載。點擊Designer Component LazyLoad，可以看到下圖的文件出現(xiàn)，表示準(zhǔn)備就緒，特性模塊被惰性加載成功。
總結(jié)
經(jīng)過優(yōu)化，首屏加載時間能得到有效的降低。另外，再說一下forRoot和forChild。CLI會把RouterModule.forRoot(routes)添加到AppRoutingModule的imports 數(shù)組中。這會讓Angular知道AppRoutingModule是一個路由模塊，而 forRoot() 表示這是根路由模塊。它會配置傳入的所有路由、讓你能訪問路由器指令并注冊 Router。
CLI 還會把 RouterModule.forChild(routes) 添加到各個特性模塊中。這種方式下 Angular 就會知道這個路由列表只負(fù)責(zé)提供額外的路由并且其設(shè)計意圖是作為特性模塊使用。你可以在多個模塊中使用 forChild()。
以上就是 SpreadJS結(jié)合Angular框架，并借助懶加載技術(shù)優(yōu)化在線Excel項目的主要過程。除了懶加載，Angular還提供了很多性能優(yōu)化方式，如瀏覽器緩存策略、RxJS、Tree Shaking、使用AoT編譯等，用好這些技術(shù)能讓你的項目性能有所提升，為用戶提供更良好的使用體驗。
分享文章：Angular性能優(yōu)化實踐——巧用第三方組件和懶加載技術(shù)
URL標(biāo)題：http://www.dlmjj.cn/article/cccihgj.html
