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
200
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
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
The Future of the Front-End Frameworks
mgechev
2
330
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
6
3k
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.4k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
CSC509 Lecture 05
javiergs
PRO
0
310
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.8k
CSC509 Lecture 08
javiergs
PRO
0
230
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
140
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
850
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Invisible Side of Design
smashingmag
302
51k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
How to Ace a Technical Interview
jacobian
280
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
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