How to increase Angular performance like a pro - part 1

When we build a large/medium Angular application our immediate cumbersome is performance!!!

Large angular application user has to wait until all the dependant javascript assets loads in the browser this will be big problem when the application scales.

To resolve this problem, Angular introduced a feature called feature modules and lazy load. We can split the feature module and load them using the lazy load which ship out of the box by implementing this we can reduce the initial load time of the application.

When we navigate to the feature route it automatically loads the feature modules that are required to render the view.

Will this this improves our application performance? Yes, but we are still not there yet.

Let's imagine once the browser loaded the all necessary assets can we load other feature modules slowly in the background?

To fix this problem Angular introduced preload strategy, this will start loading the other feature modules in background and this feature is available out of the box in Angular.

By default Angular ships with two preload strategy

1. PreloadAllModules - loads the all modules automatically
2. NoPreloading - will not load this module automatically

PreloadAllModules

RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})

NoPreloading

RouterModule.forRoot(routes, {preloadingStrategy: NoPreloading})

We can also write our own strategy to take full control on loading the modules. Let's take if we want to take control at the each route level to decide the loading strategy we can write our own as follows.

export const routes: Routes = [
    { path: '', redirectTo: 'users', pathMatch: 'full' },
    {
        path: 'items',
        loadChildren: 'app/+users/users.module#UsersModule',
        data: { preload: true, delay: false },
    },
    {
        path: 'item',
        loadChildren: 'app/+user-details/user-details.module#UserDetailsModule',
        data: { preload: true, delay: true },
    },
    {
        path: 'admin',
        loadChildren: 'app/+admin/admin.module#AdminModule',
        data: { preload: false, delay: true },
    },
];

Custom preload strategy

export class FeaturePreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, load: Function): Observable<any> {
        const loadRoute = (delay) => delay
            ? timer(150).pipe(flatMap(_ => load()))
            : load();
        return route.data && route.data.preload 
            ? loadRoute(route.data.delay)
            : of(null);
      }
}

By implementing this strategy we can load the modules eagerly and preload other modules.

RouterModule.forRoot(routes, { 
   preloadingStrategy: FeaturePreloadingStrategy
})

Summary

We have seen how to improve the large/medium angular application performance using lazy loading and preload strategy with custom strategy on this article.