Tools for Fast Angular Applications

@mgechev Tools for Fast Angular Applications 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 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 @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal
for a browser standard WHATWG

@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 •
Code-splitting Shipping fewer bytes

twitter.com/mgechev lazy-loading

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

@mgechev

@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 version 8 const routes: Routes =
[ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },  ... ];

@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

@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 One more thing to make your apps faster ⚡

@yourtwitter Angular projects without compression >27%

@yourtwitter >80% Angular projects without CDN

@mgechev

@mgechev Partnering with

@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

Tools for Fast Angular Applications

Tools for Fast Angular Applications

More Decks by Minko Gechev

Other Decks in Programming

Featured

Transcript