Tools for Fast Angular Applications

Tools for Fast Angular Applications

Angular grew significantly in the past few years from both a tooling and developer experience standpoint. This talk will explore many of the features and newer improvements in the pipeline that allow anyone to build and deploy performant apps with very little overhead.

Through real demos and examples, we’ll cover Ivy, bundle budgeting, differential serving, automatic code-splitting, and more! In the second part of the talk, we’ll focus on how to efficiently prefetch and preload different modules and components.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

May 01, 2019
Tweet

Transcript

  1. @mgechev Tools for Fast Angular Applications Minko Gechev twitter.com/mgechev
 github.com/mgechev


    blog.mgechev.com
  2. @yourtwitter Description or Image @twitterhandle Agenda • Network performance •

    Tips & tricks • Application in production
  3. @yourtwitter Network performance Description or Image @twitterhandle

  4. @yourtwitter Shipping less JavaScript

  5. @yourtwitter @mgechev • Minification/dead code elimination • Differential loading •

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

    Code-splitting Shipping fewer bytes
  7. @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
  8. @mgechev -65KB polyfills ~2-10% smaller bundles

  9. @mgechev Step 1: Load HTML Step 2: Look at script

    tags Step 2: Download right version Differential loading
  10. @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>
  11. @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>
  12. @yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal

    for a browser standard WHATWG
  13. @mgechev

  14. @yourtwitter Angular CLI Introduced this feature in v8.0.0

  15. @yourtwitter @mgechev • Set the target in tsconfig.json to es2015

    • Set the minimum supported browsers in browserlist Differential loading with Angular CLI version 8
  16. @yourtwitter @mgechev • Minification/dead code elimination • Differential loading •

    Code-splitting Shipping fewer bytes
  17. twitter.com/mgechev lazy-loading

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

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

  20. @mgechev

  21. @mgechev

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

  23. @mgechev

  24. @yourtwitter Route-based code-splitting const routes: Routes = [ { path:

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

    [ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },
 ... ];
  26. @mgechev

  27. @mgechev

  28. 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
  29. twitter.com/mgechev

  30. @yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •

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

    Prefetch on mouse over Prefetching strategies
  32. @mgechev

  33. @yourtwitter Prefetch visible links $ npm install ngx-quicklink

  34. @yourtwitter Prefetch visible links import { QuicklinkStrategy } from 'ngx-quicklink';

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

    @NgModule({ imports: [ ... QuicklinkModule ], exports: [ ... QuicklinkModule, ] }) export class SharedModule {}
  36. @yourtwitter @mgechev • Prefetch visible links • Predictive prefetching •

    Prefetch on mouse over Prefetching strategies
  37. @mgechev

  38. @mgechev

  39. @mgechev early alpha

  40. @mgechev

  41. @mgechev A performance budget is a limit for pages which

    the team is not allowed to exceed. Addy Osmani
  42. @yourtwitter Performance Budgets enforces constraints to let you have guarantees

    v8.0.0 https://angular.io/guide/build
  43. @yourtwitter One more thing to make your apps faster ⚡

  44. @yourtwitter Angular projects without compression >27%

  45. @yourtwitter >80% Angular projects without CDN

  46. @mgechev

  47. @mgechev Partnering with

  48. @yourtwitter @mgechev Summary • Reducing the bundle size • Speeding

    up user navigations • Predictive prefetching • Automated deployment via CLI
  49. @mgechev Thank you! twitter.com/mgechev
 github.com/mgechev
 blog.mgechev.com