加载页面时慢角度应用

Question

I'm already seeing this issue for a very long time and searched the web for some solutions but I think I'm not using the correct terminology to identify the problem.

I have the following command in my package.json when I run $ npm start

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

When I start my application with 'npm start' everything seems to work but after I see 'webpack: Compiled succesfully' it takes a very long time (7-8 seconds) until I actually see a page or my loading screen (a spinner is shown when HTTP calls are occuring).

I'm curious what is happening between the compile being successful and showing the page. After the compile is successful I see a blank page for 7-8 seconds.

Once the page is shown and I navigate to another page through the menu everything is immediately shown. But when I change the URL manually and hit enter it takes 7-8 seconds to load the page.

When this happens I see no activity in my console, network tab or whatever... Anything I could check to identify this 'gap' of no response?

Might be worth mentioning, I don't see this issue when serving the application with Apache after ng build --prod .

Angular version 5.2.11 Angular-CLI 1.7.4

Network tab

Performance tab

Answer 1

I'm curious what is happening between the compile being successful and showing the page. After the compile is successful I see a blank page for 7-8 seconds

Your browser needs to download the bundles of your application which must be large depending on your 7-8 seconds of loading. When you $ ng serve , by default you generate the bundles in development mode, which means that the bundles are at their raw size , so they must be large in size in comparison to the bundles in production mode.

In production mode --prod the bundles are minified so they're small, which means it will take less time to download the bundles.

NOTE:

If you want to notice this behavior, in your browser open the console & move to the network tab to see the bundles your browser is downloading & how much time it takes.