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. 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
  2. 9.

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

    tags Step 2: Download right version Differential loading
  3. 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>
  4. 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>
  5. 13.
  6. 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
  7. 20.
  8. 21.
  9. 23.
  10. 24.

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

    'settings', loadChildren: './settings/settings.module#SettingsModule' }, { path: 'article', loadChildren: './article/article.module#ArticleModule' } ];
  11. 25.

    @yourtwitter Route-based code-splitting in version 8 const routes: Routes =

    [ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },
 ... ];
  12. 26.
  13. 27.
  14. 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
  15. 32.
  16. 34.

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

    @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy })], exports: [RouterModule] }) export class AppRoutingModule {}
  17. 35.

    @yourtwitter Prefetch visible links import { QuicklinkModule } from 'ngx-quicklink';

    @NgModule({ imports: [ ... QuicklinkModule ], exports: [ ... QuicklinkModule, ] }) export class SharedModule {}
  18. 37.
  19. 38.
  20. 40.
  21. 41.

    @mgechev A performance budget is a limit for pages which

    the team is not allowed to exceed. Addy Osmani
  22. 46.
  23. 48.

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

    up user navigations • Predictive prefetching • Automated deployment via CLI