Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Building Fast Angular Applications From End-to-End
Minko Gechev
June 07, 2019
Programming
2
710
Building Fast Angular Applications From End-to-End
Minko Gechev
June 07, 2019
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
mgechev
0
23
mgechev
1
45
mgechev
1
140
mgechev
1
21
mgechev
1
47
mgechev
2
590
mgechev
1
71
mgechev
2
2k
mgechev
1
220
Other Decks in Programming
See All in Programming
dulltz
0
530
chichou
1
860
466548
0
150
yagitatsu
3
1.7k
muttsu_623
0
550
kazaman97
0
200
line_developers_tw
0
1.4k
trajchevska
2
390
nbkouhou
9
4.8k
line_developers_tw
1
500
kenmaz
1
100
akatsukinewgrad
0
220
Featured
See All Featured
jponch
103
5k
imathis
478
150k
denniskardys
220
120k
jeffersonlam
328
15k
jacobian
255
20k
morganepeng
92
14k
cromwellryan
101
5.9k
notwaldorf
13
1.6k
smashingmag
229
18k
rasmusluckow
318
18k
caitiem20
308
17k
danielanewman
200
20k
Transcript
@yourtwitter Building Fast Angular Applications From End-to-End Minko Gechev twitter.com/mgechev
github.com/mgechev blog.mgechev.com ⚡
@yourtwitter Description or Image @twitterhandle Agenda • Network performance •
Tips & tricks • Application in production
@yourtwitter Network performance Description or Image @twitterhandle
@yourtwitter Shipping less JavaScript
@yourtwitter @mgechev • Minification/dead code elimination • Differential loading •
Code-splitting Shipping fewer bytes
@yourtwitter @mgechev • Minification/dead code elimination • Differential loading •
Code-splitting Shipping fewer bytes
@yourtwitter @mgechev Differential loading • Produce ES5 bundles for newer
browsers • Do not send polyfills to modern browsers • Smaller payload • Do not downlevel modern features • Faster execution • Smaller payload
@mgechev -65KB polyfills ~2-10% smaller bundles
@mgechev Step 1: Load HTML Step 2: Look at script
tags Step 2: Download right version Differential loading
@yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading
</title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>
@yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading
</title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>
@yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal
for a browser standard WHATWG
@yourtwitter @mgechev • Minification/dead code elimination • Differential loading •
Code-splitting Shipping fewer bytes
twitter.com/mgechev lazy-loading
@yourtwitter @mgechev • Component-level • Route-level Code-splitting could be
@yourtwitter @mgechev • Component-level • Route-level Code-splitting could be
@mgechev
@mgechev
@yourtwitter @mgechev • Component-level • Route-level Code-splitting could be
@mgechev
@yourtwitter Route-based code-splitting const routes: Routes = [ { path:
'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); }, ... ];
@mgechev
@mgechev
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
@yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •
Prefetch on mouse over Prefetching strategies
@yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •
Prefetch on mouse over Prefetching strategies
@mgechev
@yourtwitter Prefetch visible links $ npm install ngx-quicklink
@yourtwitter Prefetch visible links import { QuicklinkStrategy, QuicklinkModule } from
'ngx-quicklink'; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }), QuicklinkModule], exports: [RouterModule] }) export class AppRoutingModule {}
@yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •
Prefetch on mouse over Prefetching strategies
@mgechev
@mgechev
twitter.com/mgechev
twitter.com/mgechev app-routing.module.ts pseudo code const routes: Routes = [
{ path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b
twitter.com/mgechev app-routing.module.ts pseudo code const routes: Routes = [
{ path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b
twitter.com/mgechev app-routing.module.ts pseudo code const routes: Routes = [
{ path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b /a/:id
twitter.com/mgechev app-routing.module.ts pseudo code const module = 'settings.module.js'; const path
= './settings'; const routes: Routes = [ { path: 'profile/:id', loadChildren: './profile/profile.module.js' }, { path: 'settings', loadChildren: path + '/' + module, } ];
twitter.com/mgechev app-routing.module.ts pseudo code const module = 'settings.module.js'; const path
= './settings'; const routes: Routes = [ { path: 'profile/:id', loadChildren: './profile/profile.module.js' }, { path: 'settings', loadChildren: path + '/' + module, } ];
twitter.com/mgechev app-routing.module.ts pseudo code const module = 'settings.module.js'; const path
= './settings'; const routes: Routes = [ { path: 'profile/:id', loadChildren: './profile/profile.module.js' }, { path: 'settings', loadChildren: path + '/' + module, } ];
@mgechev main.js a.js b.js c.js p = ( ...pairs)
=> { // Prefetch chunk // if connection // is sufficient }; p( ['b.js', 0.3], ['c.js', 0.7] ) p( ['a.js', 0.1], ['c.js', 0.9] ) p( ['a.js', 1] )
@mgechev
@mgechev A performance budget is a limit for pages which
the team is not allowed to exceed. Addy Osmani
@yourtwitter Performance Budgets enforces constraints to let you have guarantees
v8.0.0 https://angular.io/guide/build
@mgechev
@yourtwitter One more thing to make your apps faster ⚡
@yourtwitter Angular projects without compression >27%
@yourtwitter >80% Angular projects without CDN
@mgechev
@mgechev @angular/fire @azure/ng-deploy @zeit/ng-deploy
@yourtwitter @mgechev Summary • Reducing the bundle size • Speeding
up user navigations • Predictive prefetching • Automated deployment via CLI
@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com