![@yourtwitter
Route-based code-splitting
const routes: Routes = [
{
path: 'settings',
loadChildren: './settings/settings.module#SettingsModule'
},
{
path: 'article',
loadChildren: './article/article.module#ArticleModule'
}
];](https://image.slidesharecdn.com/building-fast-angular-applications-by-default-190408092938/85/JS-Fest-2019-Minko-Gechev-Building-Fast-Angular-Applications-by-Default-27-320.jpg)
![@yourtwitter
Route-based code-splitting in Ivy
const routes: Routes = [
{
path: 'settings',
loadChildren: import('./settings/settings.module')
.then(m => m.SettingsModule);
},
...
];](https://image.slidesharecdn.com/building-fast-angular-applications-by-default-190408092938/85/JS-Fest-2019-Minko-Gechev-Building-Fast-Angular-Applications-by-Default-28-320.jpg)
![@yourtwitter
Route-based code-splitting in Ivy
const routes: Routes = [
{
path: 'settings',
loadChildren: import('./settings/settings.module')
.then(m => m.SettingsModule);
},
...
];
Experimental](https://image.slidesharecdn.com/building-fast-angular-applications-by-default-190408092938/85/JS-Fest-2019-Minko-Gechev-Building-Fast-Angular-Applications-by-Default-29-320.jpg)
![@yourtwitter
Prefetch visible links
import { QuicklinkStrategy } from 'ngx-quicklink';
@NgModule({
imports: [RouterModule.forRoot(routes, {
preloadingStrategy: QuicklinkStrategy
})],
exports: [RouterModule]
})
export class AppRoutingModule {}](https://image.slidesharecdn.com/building-fast-angular-applications-by-default-190408092938/85/JS-Fest-2019-Minko-Gechev-Building-Fast-Angular-Applications-by-Default-42-320.jpg)
![@yourtwitter
Prefetch visible links
import { QuicklinkModule } from 'ngx-quicklink';
@NgModule({
imports: [
...
QuicklinkModule
],
exports: [
...
QuicklinkModule,
]
})
export class SharedModule {}](https://image.slidesharecdn.com/building-fast-angular-applications-by-default-190408092938/85/JS-Fest-2019-Minko-Gechev-Building-Fast-Angular-Applications-by-Default-43-320.jpg)
![@yourtwitter
ng deploy
$ ng add [PROVIDER]
$ ng run app:deploy](https://image.slidesharecdn.com/building-fast-angular-applications-by-default-190408092938/85/JS-Fest-2019-Minko-Gechev-Building-Fast-Angular-Applications-by-Default-52-320.jpg)
![How I Learned to Stop Worrying and Love Composer - php[world] 2015](https://cdn.slidesharecdn.com/ss_thumbnails/phpworld2015-howilearnedtostopworryingandlovecomposer-151119064253-lva1-app6891-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default (20)
Ad
More from JSFestUA (20)
Ad
Recently uploaded (20)
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
- 1. @mgechev Building Fast Angular Applications by Default Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com
- 2. @yourtwitter Description or Image @twitterhandle Agenda ● Network performance ● Runtime performance ● Good practices ● Application in production ● Initial rendering
- 3. @yourtwitter Network performance Description or Image @twitterhandle
- 4. @yourtwitter@mgechev Good practices ● Ship fewer bytes of JavaScript ● Lazy loading ● Preloading & prefetching ● Server-side rendering ● Write efficient code
- 6. @yourtwitter@mgechev ● Minification/dead code elimination ● Differential loading or serving ● Code-splitting Shipping fewer bytes
- 7. @yourtwitter@mgechev ● Minification/dead code elimination ● Differential loading or serving ● Code-splitting Shipping fewer bytes
- 8. @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
- 9. @mgechev -40KB polyfills -7% each bundle
- 10. @mgechev Step 1: Load HTML Step 2: Look at script tags Step 2: Download right version Differential loading
- 11. @mgechev Step 1: Load HTML Step 2: Request JS Differential serving Step 3: Return JS based on userAgent
- 12. @yourtwitter@mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal for a browser standard WHATWG
- 13. @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>
- 14. @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>
- 15. @mgechev
- 16. @yourtwitter Angular CLI Introduced this feature in v8.0.0
- 17. @yourtwitter@mgechev ● Set the target in tsconfig.json to es2015 ● Set the minimum supported browsers in browserlist Differential loading with Angular CLI version 8
- 18. @yourtwitter@mgechev ● Minification/dead code elimination ● Differential loading or serving ● Code-splitting Shipping fewer bytes
- 22. @mgechev
- 23. @mgechev
- 26. @mgechev
- 27. @yourtwitter Route-based code-splitting const routes: Routes = [ { path: 'settings', loadChildren: './settings/settings.module#SettingsModule' }, { path: 'article', loadChildren: './article/article.module#ArticleModule' } ];
- 28. @yourtwitter Route-based code-splitting in Ivy const routes: Routes = [ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); }, ... ];
- 29. @yourtwitter Route-based code-splitting in Ivy const routes: Routes = [ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); }, ... ]; Experimental
- 30. @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
- 31. @mgechev
- 32. @yourtwitter Route-based code-splitting with the future Angular CLI $ ng g module about --route=about --module=index
- 34. @mgechev
- 35. @mgechev
- 36. 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
- 38. @yourtwitter@mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies
- 39. @yourtwitter@mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies
- 40. @mgechev
- 41. @yourtwitter Prefetch visible links $ npm install ngx-quicklink
- 42. @yourtwitter Prefetch visible links import { QuicklinkStrategy } from 'ngx-quicklink'; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy })], exports: [RouterModule] }) export class AppRoutingModule {}
- 43. @yourtwitter Prefetch visible links import { QuicklinkModule } from 'ngx-quicklink'; @NgModule({ imports: [ ... QuicklinkModule ], exports: [ ... QuicklinkModule, ] }) export class SharedModule {}
- 44. @yourtwitter@mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies
- 45. @mgechev
- 46. @mgechev
- 48. @mgechev A performance budget is a limit for pages which the team is not allowed to exceed. Addy Osmani
- 49. @yourtwitter Performance Budgets enforces constraints to let you have guarantees v8.0.0 https://angular.io/guide/build
- 52. @yourtwitter ng deploy $ ng add [PROVIDER] $ ng run app:deploy
- 53. @mgechev
- 57. @mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app
- 58. @yourtwitter@mgechev ● Faster initial contentful paint ● Better SEO ● Better time to interactive? Benefits of SSR
- 59. @mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app
- 60. @mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app
- 74. @mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app
- 75. @mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app
- 76. @mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app
- 81. @yourtwitter@mgechev ● Discovery of dependencies ● Efficient code generation ● Efficient runtime Runtime optimizations
- 82. @mgechev Model View dependencies Compiler Front-end Back-end Input Output
- 83. @mgechev <p class="card-text"> {{ comment.body + 'foo' }} </p> if (rf & 1) { // Create } if (rf & 2) { ɵtextBinding(3, ɵinterpolation1(" ", ctx.comment.body, " " ...)); }
- 84. @yourtwitter@mgechev ● Tree-shakeable code ● Monomorphic executions Efficient code generation
- 85. @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
- 86. @yourtwitter@mgechev In collaboration with v8 team to make sure we generate code optimizable by the JavaScript engine Monomorphic code
- 87. @yourtwitter@mgechev Summary ● Reducing the bundle size ● Speeding up user navigations ● Automated deployment via CLI ● Progressive rehydration ● Compile-time optimizations