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
570
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
160
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
75
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
97
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
500
NPOでのDevinの活用
codeforeveryone
0
460
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
420
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
530
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
710
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
590
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
エンジニア向け採用ピッチ資料
inusan
0
170
童醫院敏捷轉型的實踐經驗
cclai999
0
200
Deep Dive into ~/.claude/projects
hiragram
10
2k
C++20 射影変換
faithandbrave
0
550
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Speed Design
sergeychernyshev
32
1k
RailsConf 2023
tenderlove
30
1.1k
Unsuck your backbone
ammeep
671
58k
Code Review Best Practice
trishagee
68
18k
Gamification - CAS2011
davidbonilla
81
5.3k
A better future with KSS
kneath
239
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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