Angular6 組件樹結構優化


本片博客主要是記錄實際項目開發中使用Angular6框架,遇到的一個問題。

現象:

  Angular6框架寫的前端web網頁,在實際部署運行過程中遇到了一種現象,引入懶加載以后,加載登錄面速度很快,但是登錄成功以后,頁面切換到首頁面組件這個過程卻很慢,總是登錄頁面顯示登錄成功以后,停留好長時間頁面才會切換到首頁面。

現象分析:

  加載登錄頁面花費了一段時間開銷,登錄成功以后,頁面切換到首頁面,加載首頁面又需要花費一段時間開銷。加載首頁module模塊時候,花費的時間開銷遠大於登錄組件的時間開銷,所以呈現了現在的現象。

解決策略:

  出於易用性的考慮,調整組件樹結構,詳情圖1 和圖2:

        

                          圖1(原組件樹結構)

          

                              圖2 (調整后的組件樹結構)

說明:

  將組件樹調整以后,首先加載homeModule,加載儀表盤組件,儀表盤組件設置一個登陸攔截,判斷是否已經登錄,已登錄,正常加載儀表盤組件,未登錄,加載登錄組件。其實時間花銷並沒有縮短,只是將加載首頁的時間花銷融匯到了首次加載頁面的時間花銷里面,缺點是首頁面加載時間開銷變大,首頁面顯示時間邊長。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM