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
470
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
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
51
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
38
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
220
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
390
Micro Frontends with Web Standards
manfredsteyer
PRO
1
290
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
210
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
160
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
100
NGRX Signal Store
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
310
What We Can Learn From OSS
inouehi
0
380
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
410
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
5
3.9k
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
320
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.1k
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
240
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
74
41k
Why Our Code Smells
bkeepers
PRO
330
56k
Code Review Best Practice
trishagee
54
15k
How GitHub (no longer) Works
holman
302
140k
A Philosophy of Restraint
colly
195
16k
The Power of CSS Pseudo Elements
geoffreycrofte
58
5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Designing with Data
zakiwarfel
95
4.8k
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