How to Speed up the First time loading time Angular 6 Application

Question

I have created Angular Application in single module fully, after final deploy files are more than 8 Mb so for First time loading time is too slow,

i have tried with --prod now the file size is around 5MB

is there any other possible to speed up

Answer 1

There are lots of action you can perform to improve performance and reduce the initial load of the application.

1. AOT build.
2. Lazy loading (https://angular.io/guide/lazy-loading-ngmodules)
3. Progressive Web App:
4. Updating Angular and angular-cli: Updating your Angular and angular-cli regularly gives you the benefit of many performance optimizations, bug fixes, new features, security etc.
5. RxJS 6  (RxJS 6 makes the whole library more tree-shakable thereby reducing the final bundle size.)
6. Service worker cache
7. Third party packages (Update to latest versions, if not required remove unnecessary packages)
8. Preload and Prefetch attributes
9. Compressing images and removing unused fonts.

To improve runtime performance: 
1. Learn about how change detection works in angular to Detach Change Detector from some components
2. use trackBy in *ngFor  (If the object reference is broken by updating the content of the object, Angular removes the related DOM node completely and recreate it again even though the actual change required is for only a small part of the DOM node. This issue can be easily solved by using trackBy.)
3.Unsubscribing Observables (To avoid memory leaks)
4. Less global Variables

To Learn More. make a prod build serve the application, open google chrome dev tools, last tab AUDIT, perform a google lighthouse test it would suggest you what can be done to improve the performance of the application.

Hope this helps. All the Best.

Answer 2

Since you already used --prod mode, next best options that i know are :

1. If possible split the single module into a bunch of smaller feature modules and lazy load them.
2. Remove unnecessary scripts and styles from index.html and load it at component levels.