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

    View Slide

  2. @yourtwitter
    Description or Image
    @twitterhandle
    Agenda
    ● Web vitals and LCP
    ● Tips & tricks
    ● Application in production

    View Slide

  3. @mgechev

    View Slide

  4. @yourtwitter
    @mgechev
    ● Minification/dead code elimination
    ● Differential loading
    ● Understand what you serve
    ● Code-splitting
    ● Server-side rendering
    Improving LCP

    View Slide

  5. twitter.com/mgechev

    View Slide

  6. @mgechev

    View Slide

  7. @mgechev

    View Slide

  8. @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

    View Slide

  9. @mgechev
    -65KB polyfills
    ~2-10% smaller bundles

    View Slide

  10. @mgechev
    Step 1: Load HTML Step 2: Look at script tags
    Step 2: Download right
    version
    Differential loading

    View Slide

  11. @yourtwitter
    Differential loading



    Differential loading






    View Slide

  12. @yourtwitter
    Differential loading



    Differential loading






    View Slide

  13. @yourtwitter
    If you’re still not on version 8
    $ ng update @angular/cli @angular/core

    View Slide

  14. @mgechev
    My production
    bundles are so
    small!
    Nobody

    View Slide

  15. @yourtwitter
    @mgechev
    ● Minification/dead code elimination
    ● Differential loading
    ● Understand what you serve
    ● Code-splitting
    ● Server-side rendering
    Improving LCP

    View Slide

  16. @mgechev
    Framework has constant size
    framework
    app code

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. @yourtwitter
    Using source-map-explorer to understand your bundles
    $ vim angular.json
    $ ng build --prod
    $ source-map-explorer dist/app/main.hash.js

    View Slide

  21. @mgechev

    View Slide

  22. @mgechev
    Large 3P dependency
    Other dependencies

    View Slide

  23. @mgechev
    Framework

    View Slide

  24. @yourtwitter
    @mgechev
    Shipping fewer bytes
    ● Minification/dead code elimination
    ● Differential loading
    ● Understand what you serve
    ● Code-splitting
    ● Server-side rendering

    View Slide

  25. twitter.com/mgechev
    lazy-loading

    View Slide

  26. @yourtwitter
    @mgechev
    ● Component-level
    ● Route-level
    Code-splitting could be

    View Slide

  27. @yourtwitter
    @mgechev
    ● Component-level
    ● Route-level
    Code-splitting could be

    View Slide

  28. @yourtwitter
    @mgechev
    ● Component-level
    ● Route-level
    Code-splitting could be

    View Slide

  29. @mgechev

    View Slide

  30. @yourtwitter
    Route-based code-splitting
    const routes: Routes = [
    {
    path: 'settings',
    loadChildren: import('./settings/settings.module')
    .then(m => m.SettingsModule);
    },
    ...
    ];

    View Slide

  31. @mgechev

    View Slide

  32. @mgechev

    View Slide

  33. 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

    View Slide

  34. twitter.com/mgechev

    View Slide

  35. @yourtwitter
    @mgechev
    ● Prefetch visible links
    ● Predictive prefetching
    ● Prefetch on mouse over
    Prefetching strategies

    View Slide

  36. @yourtwitter
    @mgechev
    ● Prefetch visible links
    ● Predictive prefetching
    ● Prefetch on mouse over
    Prefetching strategies

    View Slide

  37. @mgechev

    View Slide

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

    View Slide

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

    View Slide

  40. @yourtwitter
    @mgechev
    ● Prefetch visible links
    ● Predictive prefetching
    ● Prefetch on mouse over
    Prefetching strategies

    View Slide

  41. @mgechev

    View Slide

  42. @mgechev

    View Slide

  43. @mgechev
    Broken window

    View Slide

  44. @mgechev
    A performance budget is
    a limit for pages which
    the team is not allowed to
    exceed.
    Addy Osmani

    View Slide

  45. @yourtwitter
    Performance Budgets
    enforces constraints to let
    you have guarantees
    v8.0.0
    https://angular.io/guide/build

    View Slide

  46. @mgechev
    SSR for faster LCP

    View Slide

  47. @mgechev
    SSR enabled app
    Node.js
    Browser
    API server

    View Slide

  48. @mgechev
    SSR enabled app
    https://example.com
    Node.js
    Browser
    API server

    View Slide

  49. @mgechev
    SSR enabled app
    https://example.com
    Node.js
    Browser
    API server

    View Slide

  50. @mgechev

    View Slide

  51. @yourtwitter
    $ ng add @nguniversal/express-engine

    View Slide

  52. @yourtwitter
    Deploying an SSR app
    with a single command

    View Slide

  53. twitter.com/
    mgechev
    New in
    @angular/fire

    View Slide

  54. New in
    @angular/fire

    View Slide

  55. twitter.com/
    mgechev
    New in
    @angular/fire

    View Slide

  56. @mgechev
    @angular/fire @azure/ng-deploy @zeit/ng-deploy
    angular-cli-ghpages @netlify-builder/deploy

    View Slide

  57. @yourtwitter
    One more feature
    to make your apps faster

    View Slide

  58. @yourtwitter
    @mgechev
    ● Inline critical CSS
    ● Lazy-load styles
    ● Inline fonts
    Removal of blocking resources

    View Slide

  59. @yourtwitter













    View Slide

  60. @yourtwitter













    View Slide

  61. @yourtwitter



    onload="this.media='all'">
    <br/>div.bar { /* ... */ }<br/>.bar .spinner { /* ... */ }<br/>


    ...


    View Slide

  62. @yourtwitter
    Coming soon

    View Slide

  63. @yourtwitter
    @mgechev
    Summary
    ● Reducing the bundle size
    ● Speeding up user navigations
    ● Predictive prefetching
    ● SSR for faster LCP
    ● Automated deployment via CLI

    View Slide

  64. @mgechev
    Thank you!
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com
    Survey: mgv.io/talk

    View Slide