DEV Community

loading...
Cover image for Optimising Angular Performance with ngx-hover-preload

Optimising Angular Performance with ngx-hover-preload

Salim Chemes
Software Engineer.
・2 min read

Some time ago I wrote this post to understand how to implement lazy loading and QuickLink as preloading strategy on Angular applications.

On this post, we will review a new preloading strategy called ngx-hover-preload.

As you can imagine, the idea is to download our module once hover a routerlink. This new library was released on January by Minko Gechev. Let's take a look to see how it works.

(If you have any questions or concerns about what lazy loading and preloading strategy, just look at this.)

We will use a very simple app

  • list of dogs (with lazy loading)
  • list of cats (with lazy loading)

1- Add ngx-hover-preload

  • npm i ngx-hover-preload --save

2- Import HoverPreloadModule on app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HoverPreloadModule } from 'ngx-hover-preload';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HoverPreloadModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {} 
Enter fullscreen mode Exit fullscreen mode

3- Define HoverPreloadStrategy preloading strategy on app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HoverPreloadStrategy } from 'ngx-hover-preload';

const routes: Routes = [
  {
    path: 'dogs',
    loadChildren: () => import('./dogs/dogs.module').then((m) => m.DogsModule),
  },
  {
    path: 'cats',
    loadChildren: () => import('./cats/cats.module').then((m) => m.CatsModule),
    data: {
      preload: false,
    },
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: HoverPreloadStrategy }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Enter fullscreen mode Exit fullscreen mode

So as you can see on app-routing.module.ts, cats module has preload: false. It means that no preloading strategy will apply on it. Since dogs module does no have it, by default, preloading strategy will be applied. You can use preload flag to opt-in/opt-out.

4- Adds routerLink that points to the modules on templates (Dont Forget router-outlet)

<div>
  <a routerLink="">home</a>
</div>
<br />
<div>
  <a routerLink="dogs">dogs</a>
</div>
<br />
<div>
  <a routerLink="cats">cats</a>
</div>
<router-outlet></router-outlet>

Enter fullscreen mode Exit fullscreen mode

Let's it see on action
Hover on dogs routerlink (preloading strategy enabled, module is downloaded)
Alt Text
Alt Text

Hover on cats routerlink (preloading strategy disabled, module is not downloaded)
Alt Text

Alt Text

Conclusion
With ngx-hover-preload library we can optimize the way we handle our Angular modules. This new preloading strategy can be very useful if you want to go an extra mile with performance improvements.

Thanks for reading

References

Discussion (0)