How Lazy Is Your Component

Hoo Gaat Het

Sani Yusuf

Founder Of Haibrid

Author & Trainer

Big Fan Of Avatar Movie

@saniyusuf

Let's Talk About Lazy Loading

Traditional Web Page

Home.html

Profile.html

Single Page Application Architecture

SPA Web Page

Index.html

about.html

contact.html

profile.html

index.html

about.html

The Problem?

The Problem

The routing is happening on the front-end

We must load all Partials at the first launch

Initial launch time grows as we add more code to our SPA

Terrible for user experience

Angular Lazy Loading

Angular Lazy Loading

Built-in component routing

Uses Javascript import() Syntax

Allows for a custom strategy for lazy loading

Angular Lazy Loading

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
})

Lazy Loading Strategy

import { NgModule } from "@angular/core";
import {
  Routes,
  RouterModule,
  PreloadingStrategy,
  PreloadAllModules
} from "@angular/router";

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })
  ], 
})

The Problem?

 

What of the case when we want to load a component on its own?

Lazy loading only allows us to load routes

 

Angular Component Lazy Loading

When To Use Lazy Loaded Components?

Abeg Una Get Queshion?

How Lazy Is Your Component

By Sani Yusuf

How Lazy Is Your Component

Lazy Loaded Components In Angular

  • 1,090

More from Sani Yusuf