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
Search
Manfred Steyer
PRO
April 06, 2017
Programming
1
480
Improving Start-up Performance with Lazy Loading in Angular
Talk from ng-conf 2017, April 2017 in Salt Lake City
Manfred Steyer
PRO
April 06, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
65
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
65
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
410
Micro Frontends with Web Standards
manfredsteyer
PRO
1
290
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110
NGRX Signal Store
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
620
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Ruby GitHub Packages
bkuhlmann
0
630
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.9k
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
350
新宿ダンジョンを可視化してみた
satoshi7190
2
140
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
Milestoner
bkuhlmann
1
410
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Semantic search with Django and pgvector
pauloxnet
0
240
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Bash Introduction
62gerente
604
210k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
What the flash - Photography Introduction
edds
64
11k
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
Rails Girls Zürich Keynote
gr2m
91
13k
In The Pink: A Labor of Love
frogandcode
138
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Clear Off the Table
cherdarchuk
83
310k
Become a Pro
speakerdeck
PRO
10
4.5k
Designing for Performance
lara
601
67k
Transcript
Improving Start-up Performance with Lazy Loading in Angular 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 and Preloading • Shared Modules and
Lazy Loading Page ▪ 3
Lazy Loading Page ▪ 4
Module Structure Page ▪ 5 AppModule FeatureModule1 FeatureModule2 … SharedModule
SharedModule SharedModule
Module Structure Page ▪ 6 AppModule FeatureModule1 FeatureModule2 … SharedModule
SharedModule SharedModule
Root Module with Lazy Loading Page ▪ 7 const APP_ROUTE_CONFIG:
Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]booking.module#BookingModule' } ];
Routes for Feature Module Page ▪ 8 const FLIGHT_ROUTES =
[ { path: '', component: FlightBookingComponent, […] }, […] }
Build Configuration • Angular CLI: Done! • ngtools/webpack • Webpack
• ngtools/webpack • Big thanks to the CLI-Team • Or: angular-router-loader • Big thanks to Brandon Roberts Page ▪ 9
Two Sides of a Coin
Lazy Loading • Lazy Loading means: Loading it later •
Better startup performance • Delay during execution for loading on demand
Preloading Page ▪ 12
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 ▪ 13
Activating Preloading Page ▪ 14 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,
{ preloadingStrategy: PreloadAllModules });
DEMO Page ▪ 15
Lazy Loading and Shared Modules Page ▪ 16
Lazy Loading and Shared Modules Page ▪ 18 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService
Lazy Loading and Shared Modules Page ▪ 19 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lazy Loading and Shared Modules Page ▪ 20 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Solution Page ▪ 21 AppModule FlightModule SharedModule includes (lazy) CoreModule
includes includes Only import CoreModule into AppModule! Global Providers like AuthService
Huge CoreModule? Page ▪ 22 AppModule FlightModule SharedModule includes (lazy)
CoreModule includes includes
Solution (for Libraries) Page ▪ 23 AppModule FlightModule AuthModule includes
(lazy) CoreModule includes
Solution (for Libraries) Page ▪ 24 AppModule FlightModule AuthModule includes
(lazy) includes (with Services) CoreModule includes includes (without Services)
Auth Module Page ▪ 25 @NgModule({ […], providers: [] })
export class AuthModule { }
Auth Module Page ▪ 26 @NgModule({ […], providers: [] })
export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
Importing into AppModule @NgModule({ imports: [ AuthModule.forRoot() [...] ], declarations:
[ ... ], bootstrap: [ ... ] }) export class AppModule { }
Importing into other Modules @NgModule({ imports: [ AuthModule [...] ],
declarations: [ ... ], bootstrap: [ ... ] }) export class OtherModule { }
DEMO Page ▪ 29
Summary Page ▪ 30 Lazy Loading: Startup Performance CLI/ webpack
splits chunks Preloading Strategy Use Core Module for global Services Shared Modules w/ and w/o Providers
Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer