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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. twitter.com/mgechev

    View full-size slide

  5. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

  8. @yourtwitter
    Differential loading



    Differential loading






    View full-size slide

  9. @yourtwitter
    Differential loading



    Differential loading






    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. @mgechev
    Framework has constant size
    framework
    app code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. @mgechev
    Large 3P dependency
    Other dependencies

    View full-size slide

  19. @mgechev
    Framework

    View full-size slide

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

    View full-size slide

  21. twitter.com/mgechev
    lazy-loading

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. twitter.com/mgechev

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. @mgechev
    Broken window

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. @mgechev
    SSR for faster LCP

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. New in
    @angular/fire

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. @yourtwitter













    View full-size slide

  49. @yourtwitter













    View full-size slide

  50. @yourtwitter



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


    ...


    View full-size slide

  51. @yourtwitter
    Coming soon

    View full-size slide

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

    View full-size slide

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

    View full-size slide