I have an Angular4 app, that i build & run with Yarn.
But it's loading very slow, even 2nd & later loads with browser cache. It takes around 10 to 13 seconds on 2nd load (with caching). On 1st load i took around 30 seconds.
Please suggest me what considerations can optimise performance. Following is the screenshot of page loading:
As you can see that the initial load time is to much. How can I reduce it. On index page there's login page, that's it but all javascript & related files are loading for it.
As Aman Jain mentioned, you can speed up load times with AOT, which will help with initial load times as the ng2 compiler does not need to be sent to the client since your code is pre-compiled. This will also automatically apply tree-shaking for you, discarding modules not used by your application which can dramatically decrease the initial payload as well.
However, another factor that affects load-times is the architecture of your app, particularly how your modules are being loaded. If you are not currently using lazy-loading, I suggest you look into it: https://angular.io/guide/ngmodule#lazy-loading-modules-with-the-router
If you expect the browser to load all of your modules and dependencies for all routes and child routes (send the kitchen sink on the initial app load), then load times will increase. However, lazy loading uses a routing scheme where the client loads only the modules relevant for the current route.