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 Loading in Angular 2
Search
Manfred Steyer
PRO
December 09, 2016
Programming
0
400
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
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Micro Frontends with Web Standards
manfredsteyer
PRO
0
220
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
190
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
150
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
95
NGRX Signal Store
manfredsteyer
PRO
0
200
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
91
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
480
Other Decks in Programming
See All in Programming
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
2.4k
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
上手な探索的テストとその上達方法について
matsu802
4
660
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
GitHub Copilot Tips and Tricks
yuichielectric
26
7.5k
document.write再考
brn
5
2.5k
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
Parallel Socket Communication in Swift
s_shimotori
0
260
LPIXEL×CADDi_kaerururu
kaerururu
3
300
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
15k
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
140
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Gamification - CAS2011
davidbonilla
76
4.5k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Designing for humans not robots
tammielis
247
25k
The Invisible Side of Design
smashingmag
293
49k
Being A Developer After 40
akosma
56
580k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Atom: Resistance is Futile
akmur
258
25k
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