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

Fast Angular Apps from End to End

Minko Gechev
September 29, 2020

Fast Angular Apps from End to End

Minko Gechev

September 29, 2020
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. @yourtwitter Fast Angular Apps from End to End Minko Gechev

    twitter.com/mgechev github.com/mgechev blog.mgechev.com
  2. @yourtwitter Description or Image @twitterhandle Agenda • Web vitals and

    LCP • Tips & tricks • Application in production
  3. @yourtwitter @mgechev • Minification/dead code elimination • Differential loading •

    Understand what you serve • Code-splitting • Server-side rendering Improving LCP
  4. @yourtwitter @mgechev Differential loading • Produce ES2015 for modern browsers

    • Do not send polyfills to modern browsers • Smaller payload • Do not downlevel modern features • Faster execution • Smaller payload
  5. @mgechev Step 1: Load HTML Step 2: Look at script

    tags Step 2: Download right version Differential loading
  6. @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>
  7. @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>
  8. @yourtwitter If you’re still not on version 8 $ ng

    update @angular/cli @angular/core
  9. @yourtwitter @mgechev • Minification/dead code elimination • Differential loading •

    Understand what you serve • Code-splitting • Server-side rendering Improving LCP
  10. @mgechev Framework has constant size framework app code dependency dependency

    dependency dependency dependency dependency dependency
  11. @mgechev Framework has constant size framework app code dependency dependency

    dependency dependency dependency dependency dependency
  12. @yourtwitter Using source-map-explorer to understand your bundles $ vim angular.json

    $ ng build --prod $ source-map-explorer dist/app/main.hash.js
  13. @yourtwitter @mgechev Shipping fewer bytes • Minification/dead code elimination •

    Differential loading • Understand what you serve • Code-splitting • Server-side rendering
  14. @yourtwitter Route-based code-splitting const routes: Routes = [ { path:

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

    'ngx-quicklink'; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }), QuicklinkModule], exports: [RouterModule] }) export class AppRoutingModule {}
  17. @mgechev A performance budget is a limit for pages which

    the team is not allowed to exceed. Addy Osmani
  18. @yourtwitter <!DOCTYPE html> <html lang="en"> <head> <link href="icon.css" rel="stylesheet"> <link

    href="styles.css" rel="stylesheet"> </head> <body> <div class="bar"> <div class="spinner"> </div> <app-root> </app-root> </div> </body> </html>
  19. @yourtwitter <!DOCTYPE html> <html lang="en"> <head> <link href="icon.css" rel="stylesheet"> <link

    href="styles.css" rel="stylesheet"> </head> <body> <div class="bar"> <div class="spinner"> </div> <app-root> </app-root> </div> </body> </html>
  20. @yourtwitter <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css" media="print"

    onload="this.media='all'"> <style> div.bar { /* ... */ } .bar .spinner { /* ... */ } </style> </head> <body> ... </body> </html>
  21. @yourtwitter @mgechev Summary • Reducing the bundle size • Speeding

    up user navigations • Predictive prefetching • SSR for faster LCP • Automated deployment via CLI