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
April 06, 2017
Programming
1
560
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
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
27
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
100
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
190
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
460
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
180
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
200
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
870
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
520
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
31
Other Decks in Programming
See All in Programming
ニックトレイン登壇資料
ryotakurokawa
0
130
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
180
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
190
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
200
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
540
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
140
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
2.5k
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
350
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
320
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
920
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
4
770
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
Done Done
chrislema
183
16k
Building an army of robots
kneath
304
45k
Music & Morning Musume
bryan
46
6.4k
Fireside Chat
paigeccino
37
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to Ace a Technical Interview
jacobian
276
23k
Navigating Team Friction
lara
183
15k
Automating Front-end Workflow
addyosmani
1369
200k
GraphQLとの向き合い方2022年版
quramy
45
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
460
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] ms@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer