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 -

Answer 1

Always use latest versions of angular. Do code splitting. Lazy loading the modules reduces your initial bundle size. Remove unused imports. Try to avoid bloated third party libraries. Proper segregation of functionalities into separate modules.

Advanced: AFter doing all of the above, if you still want to reduce your bundle size. Try Using bazel for build process. https://blog.mgechev.com/2018/11/19/introduction-bazel-typescript-tutorial/

More Advanced: Still you want to reduce your bundle size. Wait for Angular Ivy(public release).

Answer 2

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 3

If you are using node js as a intermediate server just add this.

const express = require('express');
const path = require('path');
const compression = require('compression')
const app = express();
app.use(compression())

By this way you enableTextCompression

I have reduced the time half by using this.

Answer 4

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.