Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Fast Angular Applications From End-to-End

Building Fast Angular Applications From End-to-End

Minko Gechev

June 07, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. @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. @mgechev Step 1: Load HTML Step 2: Look at script

    tags Step 2: Download right version Differential loading
  3. @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. @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. @yourtwitter Route-based code-splitting const routes: Routes = [ { path:

    'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },
 ... ];
  6. 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
  7. @yourtwitter Prefetch visible links import { QuicklinkStrategy, QuicklinkModule } from

    'ngx-quicklink'; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }), QuicklinkModule], exports: [RouterModule] }) export class AppRoutingModule {}
  8. twitter.com/mgechev app-routing.module.ts pseudo code 
 const routes: Routes = [

    { path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b
  9. twitter.com/mgechev app-routing.module.ts pseudo code 
 const routes: Routes = [

    { path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b
  10. twitter.com/mgechev app-routing.module.ts pseudo code 
 const routes: Routes = [

    { path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b /a/:id
  11. twitter.com/mgechev app-routing.module.ts pseudo code const module = 'settings.module.js'; const path

    = './settings'; const routes: Routes = [ { path: 'profile/:id', loadChildren: './profile/profile.module.js' }, { path: 'settings', loadChildren: path + '/' + module, } ];
  12. twitter.com/mgechev app-routing.module.ts pseudo code const module = 'settings.module.js'; const path

    = './settings'; const routes: Routes = [ { path: 'profile/:id', loadChildren: './profile/profile.module.js' }, { path: 'settings', loadChildren: path + '/' + module, } ];
  13. twitter.com/mgechev app-routing.module.ts pseudo code const module = 'settings.module.js'; const path

    = './settings'; const routes: Routes = [ { path: 'profile/:id', loadChildren: './profile/profile.module.js' }, { path: 'settings', loadChildren: path + '/' + module, } ];
  14. @mgechev main.js a.js b.js c.js 
 p = ( ...pairs)

    => { // Prefetch chunk // if connection // is sufficient }; p( ['b.js', 0.3], ['c.js', 0.7] ) p( ['a.js', 0.1], ['c.js', 0.9] ) 
 p( ['a.js', 1] )
  15. @mgechev A performance budget is a limit for pages which

    the team is not allowed to exceed. Addy Osmani
  16. @yourtwitter @mgechev Summary • Reducing the bundle size • Speeding

    up user navigations • Predictive prefetching • Automated deployment via CLI