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
Angular, Lazy Loading, ngVikings in Copenhagen, Feb 2017
Search
Manfred Steyer
PRO
February 11, 2017
Programming
1
500
Angular, Lazy Loading, ngVikings in Copenhagen, Feb 2017
Manfred Steyer
PRO
February 11, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
96
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
170
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
95
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
100
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
CSC307 Lecture 05
javiergs
PRO
0
210
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
CSC307 Lecture 12
javiergs
PRO
0
220
CSC307 Lecture 14
javiergs
PRO
0
220
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
CSC307 Lecture 07
javiergs
PRO
0
220
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Rust.Nagoya #1
codemountains
0
170
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Adopting Sorbet at Scale
ufuk
71
8.8k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Designing with Data
zakiwarfel
96
5k
Designing Experiences People Love
moore
136
23k
Code Review Best Practice
trishagee
58
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Being A Developer After 40
akosma
72
580k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Transcript
Improving Start-up Performance with Lazy Loading in Angular 2 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 • Preloading • Prevent Lazy Loading
• Shared Modules and Lazy Loading Page 3
Lazy Loading Page 4
Module Structure Page 5 AppModule … … … SharedModule
Root Module Feature Modules Shared Module
Lazy Loading Page 6 AppModule … … … SharedModule
Root Module Feature Modules Shared Module
Root Module with Lazy Loading Page 7 const APP_ROUTE_CONFIG:
Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
Routes for Feature Module Page 8 const FLIGHT_ROUTES =
[ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
webpack configuration • angular2-router-loader • creates several chunks Page
9
DEMO Page 10
Preloading Page 11
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 12
Activating Preloading Page 13 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,
{ preloadingStrategy: PreloadAllModules });
DEMO Page 14
Lazy Loading and Shared Modules Page 22
DEMO Page 23
Lazy Loading and Shared Modules Page 24 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService
Lazy Loading and Shared Modules Page 25 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lazy Loading and Shared Modules Page 26 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Solution Page 27 AppModule FlightModule SharedModule includes (lazy) includes
CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService & Shell
DEMO
Huge CoreModule? Page 29 AppModule FlightModule SharedModule includes (lazy)
includes CoreModule includes includes
Solution (for Libraries) Page 30 AppModule FlightModule AuthModule includes
(lazy) CoreModule
Solution (for Libraries) Page 31 AppModule FlightModule AuthModule includes
(lazy) includes (with Services) CoreModule includes includes (without Services)
Auth Module Page 32 @NgModule({ […], providers: [] })
export class AuthModule { }
Auth Module Page 33 @NgModule({ […], providers: [] })
export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
DEMO Page 34
Summary Page 35 Lazy Loading of Modules webpack splits
chunks Prevent Lazy Loading with Guards Preloading Strategy Use Core Module for global Services Shared Modules w/ and w/o Providers
Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer