Sani Yusuf
Founder Of Haibrid. Co-Organiser Of Ionic UK. I Am Good At Making You Want To Use Ionic.
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
