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
580
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
210
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
530
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
420
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
140
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
200
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
330
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
220
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
110
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
960
AHC051解法紹介
eijirou
0
580
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1.1k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
480
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
690
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
300
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.2k
What's new in Adaptive Android development
fornewid
0
140
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
110
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
480
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Code Reviewing Like a Champion
maltzj
525
40k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Into the Great Unknown - MozCon
thekraken
40
2k
Six Lessons from altMBA
skipperchong
28
4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Faster Mobile Websites
deanohume
309
31k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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