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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
71
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
430
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
310
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
110
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
160
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
310
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
200
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
100
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
コーディングエージェント概観(2025/07)
itsuki_t88
0
120
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
MCPで実現できる、Webサービス利用体験について
syumai
2
480
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
Porting a visionOS App to Android XR
akkeylab
0
900
CDK引数設計道場100本ノック
badmintoncryer
2
530
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
140
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.5k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.2k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
670
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A designer walks into a library…
pauljervisheath
207
24k
Optimizing for Happiness
mojombo
379
70k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Balancing Empowerment & Direction
lara
1
480
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Why Our Code Smells
bkeepers
PRO
337
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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