twitter.com/mgechev
Step 1: Open
https://example.com/
Step 2: Determine JavaScript
which is likely to be required
Step 3: Download the
chunks
Step 4: Store chunks
in browser cache
Pre-fetching
twitter.com/mgechev
Cluster bundles associated with
nested routes, when it makes sense
Slide 54
Slide 54 text
twitter.com/mgechev
Cluster bundles associated with
nested routes, when it makes sense
Slide 55
Slide 55 text
twitter.com/mgechev
Cluster bundles associated with
nested routes, when it makes sense
when the bundles are often requested together
Slide 56
Slide 56 text
twitter.com/mgechev
Cluster bundles associated with
nested routes, when it makes sense
when the bundles are often requested together
when bundles are not too big
Slide 57
Slide 57 text
twitter.com/mgechev
• Lazy-load!
• Lazy-load based on data
• Overfetching matters
• Use data-driven prefetching of assets
• Beware of cascading route resolution
• Use link[rel=“preload|prefetch”]
Tips on lazy-loading
Slide 58
Slide 58 text
twitter.com/mgechev
Tooling
Slide 59
Slide 59 text
twitter.com/mgechev
• Manage the bundle sizes
• Prefetch only the bundles likely to be used
• Cluster small bundles in nested routes
The tooling should
Slide 60
Slide 60 text
twitter.com/mgechev
Prefetch tooling for webpack
webpack 4 preload-webpack-plugin
import(
!/* webpackPrefetch: true !*/
'!!...');
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin()
]
Slide 61
Slide 61 text
twitter.com/mgechev
Prefetch bundles which might be required in future
No manual prefetching logic
Uses link[rel=“prefetch|preload”]
Slide 62
Slide 62 text
twitter.com/mgechev
Prefetch bundles which might be required in future
No manual prefetching logic
Uses link[rel=“prefetch|preload”]
Over-fetching & bandwidth consumption
Does not allow prioritization of bundles
Does not work with content
Slide 63
Slide 63 text
twitter.com/mgechev
Slide 64
Slide 64 text
twitter.com/mgechev
slide by @addyosmani
Slide 65
Slide 65 text
twitter.com/mgechev
$ npm run eject
$ vim webpack.config.js
twitter.com/mgechev
With OnPush change detection will be
triggered when the framework, with reference
check, determines that any of the inputs of a
component has changed…
Slide 113
Slide 113 text
twitter.com/mgechev
Passing new reference
triggers the change detection
Slide 114
Slide 114 text
twitter.com/mgechev
Should we copy the array
every time?
Slide 115
Slide 115 text
Why would we do that…?
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
twitter.com/mgechev
Immutable.js helps:
• We get a new reference on change
• We do not copy the entire data structure
Slide 118
Slide 118 text
twitter.com/mgechev
Let’s see how fast it is now!
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
Non Optimized On Push
Typing Speed
Slide 121
Slide 121 text
~3x faster but still slow…
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
twitter.com/mgechev
With OnPush change detection will be
triggered when the framework, with reference
check, determines that any of the inputs of a
component has changed…or when an event
in the component is triggered
AppComponent
EmployeeListComponenet
(sales)
EmployeeListComponenet
(r&d)
E1 E2 En
… E1 E2 En
…
ListComponenet
(sales)
ListComponenet
(r&d)
Ignored details for simplicity
Slide 131
Slide 131 text
AppComponent
EmployeeListComponenet
(sales)
EmployeeListComponenet
(r&d)
E1 E2 En
… E1 E2 En
…
ListComponenet
(sales)
ListComponenet
(r&d)
Ignored details for simplicity
Slide 132
Slide 132 text
AppComponent
EmployeeListComponenet
(sales)
EmployeeListComponenet
(r&d)
E1 E2 En
… E1 E2 En
…
ListComponenet
(sales)
ListComponenet
(r&d)
Ignored details for simplicity
Slide 133
Slide 133 text
AppComponent
EmployeeListComponenet
(sales)
EmployeeListComponenet
(r&d)
E1 E2 En
… E1 E2 En
…
ListComponenet
(sales)
ListComponenet
(r&d)
Ignored details for simplicity
Slide 134
Slide 134 text
Unoptimized Refactored with On Push
Typing Speed
Slide 135
Slide 135 text
Adding items
Slide 136
Slide 136 text
twitter.com/mgechev
Recomputing everything
every time we add a new entry
Slide 137
Slide 137 text
const fibonacci = n !=> {
if (n !!=== 1 !|| n !!=== 2) return 1;
return fibonacci(n - 1) + fibonacci(n - 2);
};
Slide 138
Slide 138 text
// Two properties
// - No side effects
// - Same result for same arguments
const fibonacci = n !=> {
if (n !!=== 1 !|| n !!=== 2) return 1;
return fibonacci(n - 1) + fibonacci(n - 2);
};
Slide 139
Slide 139 text
twitter.com/mgechev
Pure Function
Slide 140
Slide 140 text
twitter.com/mgechev
Pipes in Angular
• Pure
• Impure
twitter.com/mgechev
Angular executes a pure pipe only when it
detects a change to the input value. A pure
change is either a change to a primitive input value
(String, Number, Boolean, Symbol) or a changed
object reference (Date, Array, Function, Object).
Refactored with On Push Calculation in a Pure Pipe
Adding / Removing Entries
Slide 150
Slide 150 text
twitter.com/mgechev
• Use OnPush in an isolated context
• Consider immutable.js with OnPush
• Use pure pipes instead of method calls
Tips on runtime performance