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
Fast Angular Apps from End to End
Search
Minko Gechev
September 29, 2020
Programming
1
180
Fast Angular Apps from End to End
Minko Gechev
September 29, 2020
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
180
The State of Angular
mgechev
1
190
The State of Angular
mgechev
1
360
Software Engineering as a Superpower
mgechev
1
190
Introduction to Angular
mgechev
1
190
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
200
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
The Future of the Front-End Frameworks
mgechev
2
320
Other Decks in Programming
See All in Programming
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
5つのアンチパターンから学ぶLT設計
narihara
1
120
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
VS Code Update for GitHub Copilot
74th
1
400
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
Featured
See All Featured
Done Done
chrislema
184
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building an army of robots
kneath
306
45k
BBQ
matthewcrist
89
9.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Designing for humans not robots
tammielis
253
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Docker and Python
trallard
44
3.4k
Unsuck your backbone
ammeep
671
58k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Transcript
@yourtwitter Fast Angular Apps from End to End Minko Gechev
twitter.com/mgechev github.com/mgechev blog.mgechev.com
@yourtwitter Description or Image @twitterhandle Agenda • Web vitals and
LCP • Tips & tricks • Application in production
@mgechev
@yourtwitter @mgechev • Minification/dead code elimination • Differential loading •
Understand what you serve • Code-splitting • Server-side rendering Improving LCP
twitter.com/mgechev
@mgechev
@mgechev
@yourtwitter @mgechev Differential loading • Produce ES2015 for modern 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 If you’re still not on version 8 $ ng
update @angular/cli @angular/core
@mgechev My production bundles are so small! Nobody
@yourtwitter @mgechev • Minification/dead code elimination • Differential loading •
Understand what you serve • Code-splitting • Server-side rendering Improving LCP
@mgechev Framework has constant size framework app code
@mgechev Framework has constant size framework app code dependency dependency
@mgechev Framework has constant size framework app code dependency dependency
dependency dependency dependency dependency dependency
@mgechev Framework has constant size framework app code dependency dependency
dependency dependency dependency dependency dependency
@yourtwitter Using source-map-explorer to understand your bundles $ vim angular.json
$ ng build --prod $ source-map-explorer dist/app/main.hash.js
@mgechev
@mgechev Large 3P dependency Other dependencies
@mgechev Framework
@yourtwitter @mgechev Shipping fewer bytes • Minification/dead code elimination •
Differential loading • Understand what you serve • Code-splitting • Server-side rendering
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
@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 Preloading
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
@mgechev Broken window
@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 SSR for faster LCP
@mgechev SSR enabled app Node.js Browser API server
@mgechev SSR enabled app https://example.com Node.js Browser API server
@mgechev SSR enabled app https://example.com Node.js Browser API server
@mgechev
@yourtwitter $ ng add @nguniversal/express-engine
@yourtwitter Deploying an SSR app with a single command
twitter.com/ mgechev New in @angular/fire
New in @angular/fire
twitter.com/ mgechev New in @angular/fire
@mgechev @angular/fire @azure/ng-deploy @zeit/ng-deploy angular-cli-ghpages @netlify-builder/deploy
@yourtwitter One more feature to make your apps faster ⚡
@yourtwitter @mgechev • Inline critical CSS • Lazy-load styles •
Inline fonts Removal of blocking resources
@yourtwitter <!DOCTYPE html> <html lang="en"> <head> <link href="icon.css" rel="stylesheet"> <link
href="styles.css" rel="stylesheet"> </head> <body> <div class="bar"> <div class="spinner"> </div> <app-root> </app-root> </div> </body> </html>
@yourtwitter <!DOCTYPE html> <html lang="en"> <head> <link href="icon.css" rel="stylesheet"> <link
href="styles.css" rel="stylesheet"> </head> <body> <div class="bar"> <div class="spinner"> </div> <app-root> </app-root> </div> </body> </html>
@yourtwitter <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css" media="print"
onload="this.media='all'"> <style> div.bar { /* ... */ } .bar .spinner { /* ... */ } </style> </head> <body> ... </body> </html>
@yourtwitter Coming soon ⚡
@yourtwitter @mgechev Summary • Reducing the bundle size • Speeding
up user navigations • Predictive prefetching • SSR for faster LCP • Automated deployment via CLI
@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk