javascript - 載入頁面時 Angular 應用程式緩慢

我已經看到這個問題很長一段時間了，並且在網上搜尋過一些解決方案，但我認為我沒用正確的術語來描述這個問題。

當我執行 $ npm start 時，我在 package.json 中有以下命令

ng serve --host 0.0.0.0 --disableHostCheck --proxy-config proxy.dev.json --extract-css --show-circular-dependencies false

當我使用 'npm start' 啟動我的應用程式時，一切似乎都正常，但在看到 'webpack: Compiled succesfully' 之後，直到我實際看到頁面或我的加載畫面（在發生 HTTP 請求時會顯示一個旋轉圖示）之前，需要非常長的時間（7-8 秒）。

我很好奇在編譯成功和顯示頁面之間發生了什麼。在編譯成功之後，我看到空白頁面大約 7-8 秒。

一旦頁面顯示並且我通過菜單導航到另一個頁面，所有內容都會立即顯示。但當我手動更改 URL 並按下回車時，頁面需要 7-8 秒才能加載完成。

當這種情況發生時，我在控制台、網路標籤或其他地方都看不到任何活動……有什麼我可以檢查的來識別這個沒有回應的「空白期」嗎？

可能值得一提的是，在使用 ng build --prod 之後，透過 Apache 提供應用程式時，我沒有看到這個問題。

Angular 版本 5.2.11 Angular-CLI 1.7.4

網路標籤

效能標籤

答案＃1

我很好奇在編譯成功和顯示頁面之間發生了什麼。在編譯成功後，我看到空白頁面持續了7-8秒

你的瀏覽器需要下載你的應用程式的套件，根據你 7-8 秒的加載時間，這些套件可能會很大。當你 $ ng serve 時，預設會以開發模式生成套件，這意味著這些套件的 原始大小，所以相較於生產模式的套件，它們的大小必然較大。

在生產模式 --prod 下，套件會被壓縮，因此體積較小，這意味著下載套件所需的時間會較少。

注意：

如果你想注意到這個行為，在你的瀏覽器中打開控制台並切換到網絡標籤，以查看瀏覽器正在下載的資源包以及所花費的時間。