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
750
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
86
Fast Angular Apps from End to End
mgechev
0
120
The State of Angular
mgechev
1
160
The State of Angular
mgechev
1
220
Software Engineering as a Superpower
mgechev
1
120
Introduction to Angular
mgechev
1
130
Internals of the Angular CLI
mgechev
2
1.1k
The State of Angular
mgechev
1
130
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.7k
Other Decks in Programming
See All in Programming
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
Milestoner
bkuhlmann
1
410
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
What We Can Learn From OSS
inouehi
0
440
禅の心を手に入れよ
eltociear
1
340
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.4k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
280
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
How to Ace a Technical Interview
jacobian
273
22k
[RailsConf 2023] Rails as a piece of cake
palkan
27
4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
A better future with KSS
kneath
231
16k
Agile that works and the tools we love
rasmusluckow
325
20k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
A designer walks into a library…
pauljervisheath
201
23k
Six Lessons from altMBA
skipperchong
22
3k
Building an army of robots
kneath
300
41k
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