記一次NGALAIN啓動優化

原文地址Angular4首頁加載慢優化之路

第一步:多模塊懶加載

查找官網

字符串形式LoadChildren已棄用（請參閱參考資料DeprecatedLoadChildren）。LoadChildrenCallback應改用函數形式（）。

使用 LoadChildrenCallback應改用函數形式（）

loadChildren: () => import('./lazy-route/lazy.module').then(mod => mod.LazyModule),

加入後報錯 

僅當 "--module" 標誌爲 "commonjs" 或 "esNext" 時，才支持動態導入。ts(1323)

修改 tsconfig.json

"module": "esnext"

還是報錯

npm查看版本 6.4.1 貌似不行,需要升級的8

升級過程中操作不得當，完全崩潰，重裝系統， 重裝環境，修改OK

修改測試後發現main.js還是有2M左右，看官網的demo也是2M左右

第二步：vendor.js

通過增加編譯參數：--prod –aot

編譯後發現，竟然報了一堆錯誤。不過不要驚慌，那是優化編譯時對ts語法檢查比較嚴謹，我們代碼中很多地方寫的不夠嚴謹，只能硬着頭皮一行行修改了，此外別無它法。

修改NPM腳本

發現編譯腳本 自帶--prod 增加--aot 之後，再編譯，發現還是2M左右

想到一個方法，使用OSS對象存儲

在NPM腳本後面加上 --deploy-url http://cdn.xxx.xxx/xx/xx

直接接入OSS網址，

服務器上的wwwroot只放assets文件夾和LOGO文件和index.html,其它文件放在OSS上

運行起來 main.js只有400K，具體怎麼回事沒試，但是速度已經到了1S內了

第三步：服務端開啓gizp壓縮

百度

本人IIS11，發現 壓縮默認開啓