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
160
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
140
The State of Angular
mgechev
1
180
The State of Angular
mgechev
1
300
Software Engineering as a Superpower
mgechev
1
160
Introduction to Angular
mgechev
1
160
Internals of the Angular CLI
mgechev
2
1.2k
The State of Angular
mgechev
1
170
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
The Future of the Front-End Frameworks
mgechev
2
290
Other Decks in Programming
See All in Programming
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Spring gRPC について / About Spring gRPC
mackey0225
0
220
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Formの複雑さに立ち向かう
bmthd
1
720
時計仕掛けのCompose
mkeeda
1
280
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
KATA
mclloyd
29
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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