Angular性能優(yōu)化實(shí)踐值巧用第三方組件和懶加載技術(shù)的方法教程

這篇文章主要介紹“Angular性能優(yōu)化實(shí)踐值巧用第三方組件和懶加載技術(shù)的方法教程”，在日常操作中，相信很多人在Angular性能優(yōu)化實(shí)踐值巧用第三方組件和懶加載技術(shù)的方法教程問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Angular性能優(yōu)化實(shí)踐值巧用第三方組件和懶加載技術(shù)的方法教程”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

環(huán)境準(zhǔn)備

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 全局安裝Angular CLI：npm install -g @angular/cli

3. 使用Angular CLI創(chuàng)建一個(gè)新項(xiàng)目：ng new spread-sheets-angular-cli

4. 下載SpreadJS Npm包：npm install @grapecity/spread-sheets;npm install @grapecity/spread-sheets-angular

5. 在angular.json中配置SpreadJS CS

6. 在Angular應(yīng)用程序中使用 SpreadJS

7. 使用Angular CLI構(gòu)建和運(yùn)行項(xiàng)目

完成上述環(huán)境搭建，便可將表格編輯器組件集成到 Angular 項(xiàng)目中，實(shí)現(xiàn)在線導(dǎo)入導(dǎo)出Excel以及數(shù)據(jù)在線填報(bào)等功能。

在開(kāi)始優(yōu)化之前，我們先來(lái)分析一下是什么因素影響了項(xiàng)目的性能。

影響項(xiàng)目性能的因素

在集成 SpreadJS 表格組件后，項(xiàng)目的公式數(shù)據(jù)處理速度符合預(yù)期，頁(yè)面在運(yùn)行也較為流暢。但是發(fā)布后，用戶打開(kāi)頁(yè)面在加載時(shí)間上要比開(kāi)發(fā)環(huán)境有所延長(zhǎng)，帶來(lái)的用戶體驗(yàn)較差。經(jīng)過(guò)調(diào)研，發(fā)現(xiàn)在Angular的默認(rèn)中，NgModule都是急性加載的，也就是會(huì)在應(yīng)用加載時(shí)盡快加載。無(wú)論是否要立即使用，所有模塊都會(huì)一并加載。

因此，對(duì)于多路由的大型應(yīng)用，建議采用懶加載——按需加載的NgModule的模式。通過(guò)懶加載可以減少初始包的尺寸，從而減少加載時(shí)間。

什么是懶加載？

在Web應(yīng)用程序中，系統(tǒng)的瓶頸常在于系統(tǒng)的響應(yīng)速度。如果系統(tǒng)響應(yīng)速度過(guò)慢，用戶就會(huì)出現(xiàn)埋怨情緒，系統(tǒng)的價(jià)值也因此會(huì)大打折扣。懶加載會(huì)在首次加載時(shí)，將必須的模塊加載，而其余暫時(shí)用不到的模塊則不會(huì)加載。例如在商城系統(tǒng)中，用戶打開(kāi)首頁(yè)時(shí)，只需展示商品，此時(shí)用不上支付模塊，所以支付模塊就可以使用懶加載技術(shù)。

項(xiàng)目?jī)?yōu)化

1. 劃分業(yè)務(wù)模塊

要懶加載Angular模塊，需要在AppRoutingModule routes中使用loadchildren替代component進(jìn)行配置。

在懶加載模塊的路由模塊中，添加一個(gè)指向該組件的路由。本次的demo存在兩個(gè)懶加載的模塊。

2. 建立導(dǎo)航UI

雖然可以直接在地址欄直接輸入U(xiǎn)RL，但是有導(dǎo)航UI會(huì)更好用。三個(gè)a標(biāo)簽分別代表主頁(yè)以及兩個(gè)需要懶加載的模塊。

3. 導(dǎo)入與路由配置

CLI會(huì)將每個(gè)特性模塊自動(dòng)添加到應(yīng)用級(jí)的路由映射表中，最后通過(guò)添加默認(rèn)路由來(lái)最終完成。

4. 特性模塊內(nèi)部

我們到lazy-webexcel.module.ts文件看下，導(dǎo)入了lazy-webexcel-routing.module.ts和lazy-webexcel.component.ts文件。@NgModule的imports數(shù)組列出了LazyWebExcelRoutingModule，讓LazyWebExcelModule可以訪問(wèn)他自己的路由模塊。另外，LazyWebExcelComponent屬于LazyWebExcelModule。

設(shè)置path為空，因?yàn)锳ppRoutingModule 中的路徑已經(jīng)設(shè)置了，LazyWebExcelRoutingModule中的此路由已經(jīng)位于lazywebexcel這個(gè)上下文中。另一個(gè)模塊配置也類似，因此不再贅述。

5. 確認(rèn)它正常工作

我們可以通過(guò)Chrome的開(kāi)發(fā)者工具的網(wǎng)絡(luò)頁(yè)標(biāo)簽來(lái)確認(rèn)這些模塊是否懶加載。點(diǎn)擊Designer Component LazyLoad，可以看到下圖的文件出現(xiàn)，表示準(zhǔn)備就緒，特性模塊被惰性加載成功。

總結(jié)

經(jīng)過(guò)優(yōu)化，首屏加載時(shí)間能得到有效的降低。另外，再說(shuō)一下forRoot和forChild。CLI會(huì)把RouterModule.forRoot(routes)添加到AppRoutingModule的imports 數(shù)組中。這會(huì)讓Angular知道AppRoutingModule是一個(gè)路由模塊，而 forRoot() 表示這是根路由模塊。它會(huì)配置傳入的所有路由、讓你能訪問(wèn)路由器指令并注冊(cè) Router。

CLI 還會(huì)把 RouterModule.forChild(routes) 添加到各個(gè)特性模塊中。這種方式下 Angular 就會(huì)知道這個(gè)路由列表只負(fù)責(zé)提供額外的路由并且其設(shè)計(jì)意圖是作為特性模塊使用。你可以在多個(gè)模塊中使用 forChild()。

以上就是 SpreadJS結(jié)合Angular框架，并借助懶加載技術(shù)優(yōu)化在線Excel項(xiàng)目的主要過(guò)程。除了懶加載，Angular還提供了很多性能優(yōu)化方式，如瀏覽器緩存策略、RxJS、Tree Shaking、使用AoT編譯等，用好這些技術(shù)能讓你的項(xiàng)目性能有所提升，為用戶提供更良好的使用體驗(yàn)。

到此，關(guān)于“Angular性能優(yōu)化實(shí)踐值巧用第三方組件和懶加載技術(shù)的方法教程”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！