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
760
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
110
Fast Angular Apps from End to End
mgechev
0
130
The State of Angular
mgechev
1
170
The State of Angular
mgechev
1
270
Software Engineering as a Superpower
mgechev
1
140
Introduction to Angular
mgechev
1
140
Internals of the Angular CLI
mgechev
2
1.2k
The State of Angular
mgechev
1
150
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.8k
Other Decks in Programming
See All in Programming
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.6k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
150
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
400
Server Driven Compose With Firebase
skydoves
0
400
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
370
Featured
See All Featured
Building an army of robots
kneath
302
42k
KATA
mclloyd
29
13k
RailsConf 2023
tenderlove
29
880
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Code Review Best Practice
trishagee
64
17k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Optimizing for Happiness
mojombo
376
69k
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