Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Fast Angular Applications From End-to-End
Search
Minko Gechev
June 07, 2019
Programming
2
800
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
Change the World With Open Source Software
mgechev
0
200
Fast Angular Apps from End to End
mgechev
1
200
The State of Angular
mgechev
1
200
The State of Angular
mgechev
1
390
Software Engineering as a Superpower
mgechev
1
210
Introduction to Angular
mgechev
1
220
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
220
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
3k
Other Decks in Programming
See All in Programming
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
NIKKEI Tech Talk#38
cipepser
0
120
CSC305 Lecture 09
javiergs
PRO
0
300
CSC305 Lecture 10
javiergs
PRO
0
220
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
Webサーバーサイド言語としてのRustについて
kouyuume
1
4k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
How to Ace a Technical Interview
jacobian
280
24k
The Invisible Side of Design
smashingmag
302
51k
Building Applications with DynamoDB
mza
96
6.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Writing Fast Ruby
sferik
629
62k
Faster Mobile Websites
deanohume
310
31k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
A Modern Web Designer's Workflow
chriscoyier
697
190k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Into the Great Unknown - MozCon
thekraken
40
2.1k
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