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 (Jan 2017)
Search
Manfred Steyer
PRO
January 31, 2017
Programming
0
170
Improving Start-up Performance with Lazy Loading in Angular 2 (Jan 2017)
Talk from Meetup at Angular Munich, Jan 2017
Manfred Steyer
PRO
January 31, 2017
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
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
上手な探索的テストとその上達方法について
matsu802
4
650
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
14k
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
520
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
LLMチャットボットのアプリケーション設計Tips
os1ma
4
660
object-oriented-conference-2024
fuwasegu
6
1.9k
GitHub Copilot Tips and Tricks
yuichielectric
26
7.4k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Designing the Hi-DPI Web
ddemaree
275
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
The Cult of Friendly URLs
andyhume
73
5.6k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Building Adaptive Systems
keathley
29
1.8k
How to name files
jennybc
62
92k
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 • Preloading • Prevent Lazy Loading
• 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 • creates several chunks Page
9
DEMO Page 10
Preloading Page 11
Idea • Modules that might be needed later are loaded
after (!) the start of the application • When the module is actually needed, it is available immediately Page 12
Activating Preloading Page 13 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,
{ preloadingStrategy: PreloadAllModules });
DEMO Page 14
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
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 (lazy) includes
CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService & Shell
DEMO
Huge CoreModule? Page 29 AppModule FlightModule SharedModule includes (lazy)
includes CoreModule includes includes
Solution (for Libraries) Page 30 AppModule FlightModule AuthModule includes
(lazy) CoreModule
Solution (for Libraries) Page 31 AppModule FlightModule AuthModule includes
(lazy) includes (with Services) CoreModule includes includes (without Services)
Auth Module Page 32 @NgModule({ […], providers: [] })
export class AuthModule { }
Auth Module Page 33 @NgModule({ […], providers: [] })
export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
DEMO Page 34
Summary Page 35 Lazy Loading of Modules webpack splits
chunks Prevent Lazy Loading with Guards Preloading Strategy Use Core Module for global Services Shared Modules w/ and w/o Providers
Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer