Building Fast Angular Applications From End-to-End

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
June 07, 2019
Programming
2
700

Building Fast Angular Applications From End-to-End

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

June 07, 2019
Tweet

More Decks by Minko Gechev

See All by Minko Gechev
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
90
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
12
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
29
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
2
500
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
63
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
2
1.8k
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
210
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
31
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
23

Other Decks in Programming

See All in Programming
1405a601755e5fcbfdc93a2560368bb1?s=48 freddi
1
200
110cd4dcaed019b3bd9809e541afdeb6?s=48 okuramasafumi
0
200
D83b3739651001461f48763639b90b50?s=48 mazipan
4
940
B3a78cfbf06ca9ee860536c6d1de5e7f?s=48 ykanoh
0
210
Faf9deb49f754b79390b64d036725f67?s=48 yuukiyo
1
550
35e08efcf39d692f540047fb756eb4e3?s=48 konifar
1
940
A10e41b0a61d59f2258d7f6172c33479?s=48 kaityo256
0
420
Acb6390b6c4b5192f40e10601b63dafc?s=48 twkiiim
0
1.1k
5fc8ab822e946a8ddfa46ba15a848392?s=48 fuqda
1
150
E48bd6aeb77b88d5762cd5d96e2c397d?s=48 wen_liao
2
1k
252e6c31a6452aa80deb9ad0107975c7?s=48 attakei
0
180
Db8efd836c9a09b71e3d8e1c60d6ea84?s=48 colinfay
0
130

Featured

See All Featured
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
249
19k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
353
62k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
50
3.9k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
78
3.1k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
175
14k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
606
53k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.8k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
497
36k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
183
14k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
86
11k

Transcript

  1. @yourtwitter Building Fast Angular Applications From End-to-End Minko Gechev twitter.com/mgechev


    github.com/mgechev
 blog.mgechev.com ⚡

  2. @yourtwitter Description or Image @twitterhandle Agenda • Network performance •

    Tips & tricks • Application in production

  3. @yourtwitter Network performance Description or Image @twitterhandle

  4. @yourtwitter Shipping less JavaScript

  5. @yourtwitter @mgechev • Minification/dead code elimination • Differential loading •

    Code-splitting Shipping fewer bytes

  6. @yourtwitter @mgechev • Minification/dead code elimination • Differential loading •

    Code-splitting Shipping fewer bytes

  7. @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

  8. @mgechev -65KB polyfills ~2-10% smaller bundles

  9. @mgechev Step 1: Load HTML Step 2: Look at script

    tags Step 2: Download right version Differential loading

  10. @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>

  11. @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>

  12. @yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal

    for a browser standard WHATWG

  13. @yourtwitter @mgechev • Minification/dead code elimination • Differential loading •

    Code-splitting Shipping fewer bytes

  14. twitter.com/mgechev lazy-loading

  15. @yourtwitter @mgechev • Component-level • Route-level Code-splitting could be

  16. @yourtwitter @mgechev • Component-level • Route-level Code-splitting could be

  17. @mgechev

  18. @mgechev

  19. @yourtwitter @mgechev • Component-level • Route-level Code-splitting could be

  20. @mgechev

  21. @yourtwitter Route-based code-splitting const routes: Routes = [ { path:

    'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },
 ... ];

  22. @mgechev

  23. @mgechev

  24. 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

  25. twitter.com/mgechev

  26. @yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •

    Prefetch on mouse over Prefetching strategies

  27. @yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •

    Prefetch on mouse over Prefetching strategies

  28. @mgechev

  29. @yourtwitter Prefetch visible links $ npm install ngx-quicklink

  30. @yourtwitter Prefetch visible links import { QuicklinkStrategy, QuicklinkModule } from

    'ngx-quicklink'; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }), QuicklinkModule], exports: [RouterModule] }) export class AppRoutingModule {}

  31. @yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •

    Prefetch on mouse over Prefetching strategies

  32. @mgechev

  33. @mgechev

  34. twitter.com/mgechev

  35. 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

  36. 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

  37. 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

  38. 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, } ];

  39. 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, } ];

  40. 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, } ];

  41. @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] )

  42. @mgechev

  43. @mgechev A performance budget is a limit for pages which

    the team is not allowed to exceed. Addy Osmani

  44. @yourtwitter Performance Budgets enforces constraints to let you have guarantees

    v8.0.0 https://angular.io/guide/build

  45. @mgechev

  46. @yourtwitter One more thing to make your apps faster ⚡

  47. @yourtwitter Angular projects without compression >27%

  48. @yourtwitter >80% Angular projects without CDN

  49. @mgechev

  50. @mgechev @angular/fire @azure/ng-deploy @zeit/ng-deploy

  51. @yourtwitter @mgechev Summary • Reducing the bundle size • Speeding

    up user navigations • Predictive prefetching • Automated deployment via CLI

  52. @mgechev Thank you! twitter.com/mgechev
 github.com/mgechev
 blog.mgechev.com