Angular Performance

Emmanuel Mendoza and Omar Axel Del Angel Torres

Angular Performance
 1. Lazy-load and Preload
2. ArchitectureTips
Modularization
Global services
Events (From Component & Service)
Temary

Methods using promises
Gulp, Webpack
1. Web Workers
2. RX Observables
Lazy-load
Lazyload

What do Lazy-load used for?

Lazy-load is one of the best features of Router Module that can load each module when
it is required.

Dramatically reduces the initial loading time.

Installation with Webpack

1. Installation
Installation via npm package angular-
router-loader

1. Webpack config
Add the new library in to webpack config.
Installation with Webpack

3. Routing
Configuring the Root Routing Module
Installation with Webpack

3. Configure children
Configuring Children Routing Modules
Demo - Lazy-load
Preload
Preload vs Lazy-load

What 's the different?

Lazy-load splits the modules application in
chunks files, they are waiting for the
active navigate to the lazy-loadable
section; the router will have to fetch the Preloading Lazy-load modules it's a way to
required modules from the server, which solve the timing problem.
can take time.
The router can preload all lazy-loadable
module in the background while the user is
interacting with our application.
Installation with Webpack - Enable preloading for
all modules

1. Installation
Import PreloadAllModules

Add a preloadingStrategy object

Installation with Webpack - Enable preloading for
all modules

2. Enable custom preloading strategy

Import Route, PreloadingStrategy and Observable

Export a preload custom Class

Add a new object at the route path that you want to preload

Use the preloadStrategy already created into the router

module.
Installation with Webpack - Enable preloading for
all modules

3. Import the custom preloader as a provider

Demo - Preload
Architecture
Architecture

Modularization
Architecture

Global services
Architecture

Events (From Component & Service)

Architecture

Methods using promises

Architecture
gulpfile.js optimization.config.json
Gulp, Webpack
webpack.config.js
Demo - Architecture
End part 1, Thank you.
Web Workers
Web Workers

What do web workers is used

for?
A web worker is a JavaScript running in the
background without affecting the
performance of the page.
Speeds up applications by creating
multiple threads.
Demo - Web Workers
RX Observables
RX Observables Vs Promises

RX Observables Promises
An Observable handles allows to pass A Promise handles a single event
zero or more events when an async when an async operation completes
operation completes, fails or finishes. or fails.

Supports cancellation. Does not support cancellation.

Observable provides operators such as

map, forEach, reduce, retry, replay...
Demo - RX Observables
Thats all, Thank you.