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
330
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
490
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
230
Other Decks in Programming
See All in Programming
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
250
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
510
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
480
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.6k
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.9k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
200
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
260
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
Improving my own Ruby thereafter
sisshiki1969
1
160
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
22
11k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Context Engineering - Making Every Token Count
addyosmani
1
28
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Building Adaptive Systems
keathley
43
2.7k
Scaling GitHub
holman
463
140k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Thoughts on Productivity
jonyablonski
70
4.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Invisible Side of Design
smashingmag
301
51k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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