Tweet
Tweet

Slide 1

Slide 1 text

@mgechev Tools for Fast Angular Applications Minko Gechev twitter.com/mgechev
 github.com/mgechev
 blog.mgechev.com

Slide 2

Slide 2 text

@yourtwitter Description or Image @twitterhandle Agenda ● Network performance ● Tips & tricks ● Application in production

Slide 3

Slide 3 text

@yourtwitter Network performance Description or Image @twitterhandle

Slide 4

Slide 4 text

@yourtwitter Shipping less JavaScript

Slide 5

Slide 5 text

@yourtwitter @mgechev ● Minification/dead code elimination ● Differential loading ● Code-splitting Shipping fewer bytes

Slide 6

Slide 6 text

@yourtwitter @mgechev ● Minification/dead code elimination ● Differential loading ● Code-splitting Shipping fewer bytes

Slide 7

Slide 7 text

@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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

@mgechev Step 1: Load HTML Step 2: Look at script tags Step 2: Download right version Differential loading

Slide 10

Slide 10 text

@yourtwitter Differential loading Differential loading

Slide 11

Slide 11 text

@yourtwitter Differential loading Differential loading

Slide 12

Slide 12 text

@yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal for a browser standard WHATWG

Slide 13

Slide 13 text

@mgechev

Slide 14

Slide 14 text

@yourtwitter Angular CLI Introduced this feature in v8.0.0

Slide 15

Slide 15 text

@yourtwitter @mgechev ● Set the target in tsconfig.json to es2015 ● Set the minimum supported browsers in browserlist Differential loading with Angular CLI version 8

Slide 16

Slide 16 text

@yourtwitter @mgechev ● Minification/dead code elimination ● Differential loading ● Code-splitting Shipping fewer bytes

Slide 17

Slide 17 text

twitter.com/mgechev lazy-loading

Slide 18

Slide 18 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 19

Slide 19 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 20

Slide 20 text

@mgechev

Slide 21

Slide 21 text

@mgechev

Slide 22

Slide 22 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 23

Slide 23 text

@mgechev

Slide 24

Slide 24 text

@yourtwitter Route-based code-splitting const routes: Routes = [ { path: 'settings', loadChildren: './settings/settings.module#SettingsModule' }, { path: 'article', loadChildren: './article/article.module#ArticleModule' } ];

Slide 25

Slide 25 text

@yourtwitter Route-based code-splitting in version 8 const routes: Routes = [ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },
 ... ];

Slide 26

Slide 26 text

@mgechev

Slide 27

Slide 27 text

@mgechev

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

twitter.com/mgechev

Slide 30

Slide 30 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 31

Slide 31 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 32

Slide 32 text

@mgechev

Slide 33

Slide 33 text

@yourtwitter Prefetch visible links $ npm install ngx-quicklink

Slide 34

Slide 34 text

@yourtwitter Prefetch visible links import { QuicklinkStrategy } from 'ngx-quicklink'; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy })], exports: [RouterModule] }) export class AppRoutingModule {}

Slide 35

Slide 35 text

@yourtwitter Prefetch visible links import { QuicklinkModule } from 'ngx-quicklink'; @NgModule({ imports: [ ... QuicklinkModule ], exports: [ ... QuicklinkModule, ] }) export class SharedModule {}

Slide 36

Slide 36 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 37

Slide 37 text

@mgechev

Slide 38

Slide 38 text

@mgechev

Slide 39

Slide 39 text

@mgechev early alpha

Slide 40

Slide 40 text

@mgechev

Slide 41

Slide 41 text

@mgechev A performance budget is a limit for pages which the team is not allowed to exceed. Addy Osmani

Slide 42

Slide 42 text

@yourtwitter Performance Budgets enforces constraints to let you have guarantees v8.0.0 https://angular.io/guide/build

Slide 43

Slide 43 text

@yourtwitter One more thing to make your apps faster ⚡

Slide 44

Slide 44 text

@yourtwitter Angular projects without compression >27%

Slide 45

Slide 45 text

@yourtwitter >80% Angular projects without CDN

Slide 46

Slide 46 text

@mgechev

Slide 47

Slide 47 text

@mgechev Partnering with

Slide 48

Slide 48 text

@yourtwitter @mgechev Summary ● Reducing the bundle size ● Speeding up user navigations ● Predictive prefetching ● Automated deployment via CLI

Slide 49

Slide 49 text

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