Fanis Prodromou
I am a Senior Software Engineer with a passion for Front End development with Angular. I have developed vast experience in code quality, application architecture, and application performance.
- Google Developer Expert for Angular
- Senior Angular Developer @ ASI
- Co-organizer of Angular Athens Meetup
- Angular Content Creator
Fanis Prodromou
/prodromouf
https://blog.profanis.me
https://angular.love
@prodromouf
Learn how to use Angular's @defer block
to improve performance
The Problem?
export const routes: Routes = [
{
path: 'yellow',
component: YellowComponent,
},
{
path: 'cyan',
component: CyanComponent,
},
{
path: 'purple',
component: PurpleComponent,
},
];main.js
main.js
xxx mB
main.js
main.js
main.js
"What's the issue?"
The Solution?
Code Splitting
export const routes: Routes = [
{
path: 'yellow',
loadComponent: () =>
import('./yellow.component').then((it) => it.YellowComponent),
},
{
path: 'cyan',
loadComponent: () =>
import('./cyan.component').then((it) => it.CyanComponent),
},
{
path: 'purple',
loadComponent: () =>
import('./purple.component').then((it) => it.PurpleComponent),
},
];chunk-yellow.js
chunk-cyan.js
chunk-purple.js
chunk-yellow.js
chunk-blue.js
chunk-blue.js
chunk-purple.js
chunk-yellow.js
chunk-cyan.js
chunk-purple.js
chunk-yellow.js
chunk-cyan.js
chunk-purple.js
chunk-yellow.js
chunk-cyan.js
chunk-purple.js
chunk-cyan.js
chunk-cyan.js
chunk-cyan-2.js
chunk-cyan-1.js
chunk-cyan-1.js
User Flow
A
chunk-cyan-2.js
User Flow
Β
chunk-cyan-2.js
const componentInstance = await import('./cyan.component').then((it) => it.CyanComponent)
this.vcr.createComponent(componentInstance);Error handling
Loading...
Cleanup
The @defer block
@defer {
<app-cyan />
}
@defer (when isVisible) {
<app-cyan />
} @placeholder {
<span>Cyan Component Will be Rendered Here</span>
} @loading {
<span>Loading...</span>
} @error {
<span>Oops! Failed to download</span>
}
chunk-yellow.js
chunk-cyan-1.js
chunk-purple.js
chunk-cyan-2.js
defer
chunk-yellow.js
chunk-cyan-1.js
chunk-purple.js
chunk-cyan-2.js
defer
chunk-yellow.js
chunk-cyan-1.js
chunk-purple.js
chunk-cyan-2.js
defer
chunk-yellow.js
chunk-cyan-1.js
chunk-purple.js
chunk-cyan-2.js
defer
"What if the component is super heavy?"
above the fold
below the fold
Q & A
Thank you !!
/prodromouf
https://blog.profanis.me
https://angular.love
@prodromouf
Code Shots With Profanis
Angular 17 Defer Loading
By Fanis Prodromou
