Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Improving Start-up Performance with Lazy Loadin...
Search
Manfred Steyer
PRO
December 09, 2016
Programming
0
520
Improving Start-up Performance with Lazy Loading in Angular 2
Slides from talk at ngbe in Belgium, 2016
Manfred Steyer
PRO
December 09, 2016
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
320
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
480
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
230
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2k
ProxyによるWindow間RPC機構の構築
syumai
3
1k
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
140
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
250
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
350
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
400
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
480
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
We Have a Design System, Now What?
morganepeng
53
7.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Automating Front-end Workflow
addyosmani
1370
200k
A better future with KSS
kneath
239
17k
Rails Girls Zürich Keynote
gr2m
95
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Improving Start-up Performance with Lazy Loading in Angular 2 Manfred
Steyer SOFTWAREarchitekt.at ManfredSteyer
About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert (GDE) Page 2 Manfred Steyer
Contents • Lazy Loading • Prevent Lazy Loading • Preloading
• Shared Modules and Lazy Loading Page 3
Lazy Loading Page 4
Module Structure Page 5 AppModule … … … SharedModule
Root Module Feature Modules Shared Module
Lazy Loading Page 6 AppModule … … … SharedModule
Root Module Feature Modules Shared Module
Root Module with Lazy Loading Page 7 const APP_ROUTE_CONFIG:
Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
Routes for Feature Module Page 8 const FLIGHT_ROUTES =
[ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
webpack configuration • angular2-router-loader • splits bundle into several chunks
Page 9
DEMO Page 10
Prevent Lazy-Loading
Guards • Services that can intercept routing • Can prevent
requested action
Base Types for Guards CanActivate CanActivateChild CanDeactivate CanLoad
Sample @Injectable() export class AuthLoadGuard implements CanLoad { canLoad(route: Route):
Observale<boolean> | Promise<boolean> | boolean { return true; } }
Configure a Guard let APP_ROUTES: Routes = [ { path:
'flight-booking', loadChildren: ‚[…]', canLoad: [AuthLoadGuard] }, […] } Just a Token // Your Module providers: [ { provide: AuthLoadGuard, useClass: AuthLoadGuard} ],
Caution • This has nothing to do with security •
It’s about usability
DEMO
Preloading Page 18
Idea • Modules that might be needed later are loaded
after (!) the start of the application • When the module is actually needed later, it is available immediately Page 19
Activating Preloading Page 20 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,
{ preloadingStrategy: PreloadAllModules });
DEMO Page 21
Lazy Loading and Shared Modules Page 22
DEMO Page 23
Lazy Loading and Shared Modules Page 24 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService
Lazy Loading and Shared Modules Page 25 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lazy Loading and Shared Modules Page 26 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Solution Page 27 AppModule FlightModule SharedModule includes (with Providers)
includes (lazy) includes (without Providers) AuthService
Shared Module Page 28 @NgModule({ […], providers: [] })
export class SharedModule { }
Shared Module Page 29 @NgModule({ […], providers: [] })
export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [AuthService, […]] } } }
DEMO Page 30
Summary Page 31 Lazy Loading of Modules webpack splits
bundle Prevent Lazy Loading with Guards Preloading Strategy Shared Modules w/ and w/o Providers Lots of lazy animals on the web ;-)
Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer