Building Fast Angular Applications By Default

@mgechev Building Fast Angular Applications by Default Minko Gechev twitter.com/mgechev 
github.com/mgechev  blog.mgechev.com

@yourtwitter Description or Image @twitterhandle Agenda • Network performance •
Runtime performance • Good practices • Application in production • Initial rendering

@yourtwitter Network performance Description or Image @twitterhandle

@yourtwitter @mgechev Good practices • Ship fewer bytes of JavaScript
• Lazy loading • Preloading & prefetching • Server-side rendering • Write efficient code

@yourtwitter Shipping less JavaScript

@yourtwitter @mgechev • Minification/dead code elimination • Differential loading or
serving • 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 -40KB polyfills -7% each bundle

@mgechev Step 1: Load HTML Step 2: Look at script
tags Step 2: Download right version Differential loading

@mgechev Step 1: Load HTML Step 2: Request JS Differential
serving Step 3: Return JS based on userAgent

@yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal
for a browser standard WHATWG

@yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading
</title> </head> <body> <script type="module" src="app.mjs"> </script> <script nomodule src="app.js"> </script> </body> </html>

@mgechev

@yourtwitter Angular CLI Introduced this feature in v8.0.0

@yourtwitter @mgechev • Set the target in tsconfig.json to es2015
• Set the minimum supported browsers in browserlist Differential loading with Angular CLI version 8

@yourtwitter @mgechev • Minification/dead code elimination • Differential loading or
serving • Code-splitting Shipping fewer bytes

twitter.com/mgechev lazy-loading

@yourtwitter @mgechev • Component-level • Route-level Code-splitting could be

@mgechev

@mgechev https://www.youtube.com/watch?v=MMPl9wHzmS4

@yourtwitter @mgechev • Component-level • Route-level Code-splitting could be

@mgechev

@yourtwitter Route-based code-splitting const routes: Routes = [ { path:
'settings', loadChildren: './settings/settings.module#SettingsModule' }, { path: 'article', loadChildren: './article/article.module#ArticleModule' } ];

@yourtwitter Route-based code-splitting in Ivy const routes: Routes = [
{ path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },  ... ];

@yourtwitter Route-based code-splitting in Ivy const routes: Routes = [
{ path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },  ... ]; Experimental

@yourtwitter @mgechev 1. Definition of a lazy module 2. Declaration
of a lazy route 3. Definition of a component 4. Declaration of a eager route Steps for creating a lazy-loaded module

@mgechev

@yourtwitter Route-based code-splitting with the future Angular CLI $ ng
g module about --route=about --module=index

@yourtwitter @mgechev Questions

@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

@mgechev

@yourtwitter Prefetch visible links $ npm install ngx-quicklink

@yourtwitter Prefetch visible links import { QuicklinkStrategy } from 'ngx-quicklink';
@NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy })], exports: [RouterModule] }) export class AppRoutingModule {}

@yourtwitter Prefetch visible links import { QuicklinkModule } from 'ngx-quicklink';
@NgModule({ imports: [ ... QuicklinkModule ], exports: [ ... QuicklinkModule, ] }) export class SharedModule {}

@yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •
Prefetch on mouse over Prefetching strategies

@mgechev

@mgechev early alpha

@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

@yourtwitter Angular projects without compression >27%

@yourtwitter >80% Angular projects without CDN

@yourtwitter ng deploy $ ng add [PROVIDER] $ ng run
app:deploy

@mgechev

@mgechev Partnering with

@yourtwitter Server-side rendering

@mgechev Step 1: Request page Step 2: Render page Step
3: Paint & load JS Server-side rendering Step 4: Bootstrap app

@yourtwitter @mgechev • Faster initial contentful paint • Better SEO
• Better time to interactive? Benefits of SSR

@mgechev https://addyosmani.com/blog/rehydration/

twitter.com/mgechev Destructive Rehydration DOM Component tree

twitter.com/mgechev Progressive Rehydration DOM ( )

twitter.com/mgechev ( ) Progressive Rehydration DOM

twitter.com/mgechev ( ) Progressive Rehydration DOM ChildCmp1

twitter.com/mgechev ( ) Progressive Rehydration DOM ChildCmp1 ChildCmp2

twitter.com/mgechev ( ) Progressive Rehydration DOM RootCmp ChildCmp1 ChildCmp2

@yourtwitter Progressive bootstrapping

twitter.com/mgechev Progressive loading DOM

twitter.com/mgechev Progressive loading DOM ⌨ Key down

twitter.com/mgechev Progressive loading DOM ChildCmp

@yourtwitter Faster Rendering

@yourtwitter @mgechev • Discovery of dependencies • Efficient code generation
• Efficient runtime Runtime optimizations

@mgechev Model View dependencies Compiler        Front-end Back-end
Input Output

@mgechev <p class="card-text"> {{ comment.body + 'foo' }} </p> if
(rf & 1) { // Create } if (rf & 2) { ɵtextBinding(3, ɵinterpolation1(" ", ctx.comment.body, " " ...)); }

@yourtwitter @mgechev • Tree-shakeable code • Monomorphic executions Efficient code
generation

@mgechev Tree-shakeable code import { ɵelementStart, … } from ...
if (rf & 1) { ɵelementStart(0, "div", _c0); ɵelementStart(2, "p", _c2); ɵtext(3); ɵelementEnd(); ɵelementEnd(); } if (rf & 2) { ɵtextBinding(3, ... ɵinterpolation1( ...) } The compiler imports only what given component needs

@yourtwitter @mgechev In collaboration with v8 team to make sure
we generate code optimizable by the JavaScript engine Monomorphic code

@yourtwitter @mgechev Summary • Reducing the bundle size • Speeding
up user navigations • Automated deployment via CLI • Progressive rehydration • Compile-time optimizations

@mgechev Thank you! twitter.com/mgechev  github.com/mgechev  blog.mgechev.com

Building Fast Angular Applications By Default

Building Fast Angular Applications By Default

More Decks by Minko Gechev

Other Decks in Programming

Featured

Transcript