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
Lazy Loading und Preloading mit Angular, Präsentation von ngGraz, November 2016
Search
Manfred Steyer
PRO
November 26, 2016
Programming
0
210
Lazy Loading und Preloading mit Angular, Präsentation von ngGraz, November 2016
Manfred Steyer
PRO
November 26, 2016
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
50
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
66
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
100
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
90
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
250
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
430
Micro Frontends with Web Standards
manfredsteyer
PRO
1
320
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
230
Other Decks in Programming
See All in Programming
Deep Dive into React Stream/Serialize
mugi_uno
3
760
AppRouter Panel Talk
yosuke_furukawa
PRO
1
500
Open AI APIを使う前に知っておきたいアカウントTier の話
akki_megane
0
110
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
140
見た目から始める生産性向上
ikumatadokoro
10
1.5k
JavaScript Closure
asoluka
0
1.2k
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
Domain-Driven Transformation
hschwentner
2
1.5k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1.1k
Next.js App Router
quramy
12
2.1k
SIMD Parallel Programming with the Vector API
josepaumard
0
240
Featured
See All Featured
Docker and Python
trallard
35
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Practical Orchestrator
shlominoach
183
9.7k
Six Lessons from altMBA
skipperchong
22
3k
Building an army of robots
kneath
300
41k
Producing Creativity
orderedlist
PRO
338
39k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Web Components: a chance to create the future
zenorocha
306
41k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Transcript
Lazy Loading und Preloading mit Angular 2 Manfred Steyer
About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert Page 2 Manfred Steyer
Inhalt • Lazy Loading • Preloading • Nutzung von Shared
Modules Page 3
Lazy Loading Page 4
Modul-Struktur Page 5 AppModule … … … SharedModule Root
Module Feature Modules Shared Module
Root Module mit Lazy Loading Page 6 const APP_ROUTE_CONFIG:
Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
Routen für Feature Module Page 7 const FLUG_ROUTES =
[ { path: '', component: FlugBuchenComponent, […] }, […] }
Konfiguration von Webpack • angular2-router-loader • Splittet Bundle in mehrere
Teile Page 8
DEMO Page 9
Preloading Page 10
Idee • Eventuell später benötigte Module werden nach (!) Anwendungsstart
geladen • Wird das Modul später tatsächlich benötigt, steht es augenblicklich zur Verfügung Page 11
Preloading aktivieren Page 12 export const AppRoutesModule = RouterModule.forRoot(
ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
DEMO Page 13
Lazy Loading und Shared Services Page 14
DEMO Page 15
Lazy Loading und Shared Modules Page 16 AppModule FlugModule
SharedModule includes includes (lazy) includes
Lazy Loading und Shared Modules Page 17 AppModule FlugModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lösung Page 18 AppModule FlugModule SharedModule includes (inkl. Provider)
includes (lazy) includes (exkl. Provider) AuthService
Shared Module Page 19 @NgModule({ […], providers: [] })
export class SharedModule { }
Shared Module Page 20 @NgModule({ […], providers: [] })
export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [AuthService, […]] } } }
DEMO Page 21
Zusammenfassung Page 22 Lazy Loading von Modulen webpack splittet
Bundle Preloading Strategy Shared Modules mit und ohne Provider
Kontakt [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer