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
790
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
380
Software Engineering as a Superpower
mgechev
1
210
Introduction to Angular
mgechev
1
210
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
2.9k
Other Decks in Programming
See All in Programming
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.6k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
380
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
200
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
200
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
460
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
240
CSC305 Lecture 05
javiergs
PRO
0
210
Model Pollution
hschwentner
1
190
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
350
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Speed Design
sergeychernyshev
32
1.1k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
How to Think Like a Performance Engineer
csswizardry
27
2k
Side Projects
sachag
455
43k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Navigating Team Friction
lara
189
15k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Scaling GitHub
holman
463
140k
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