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
    Building Fast Angular Applications
    From End-to-End
    Minko Gechev
    twitter.com/mgechev

    github.com/mgechev

    blog.mgechev.com

    View Slide

  2. @yourtwitter
    Description or Image
    @twitterhandle
    Agenda
    ● Network performance
    ● Tips & tricks
    ● Application in production

    View Slide

  3. @yourtwitter
    Network performance Description or Image
    @twitterhandle

    View Slide

  4. @yourtwitter
    Shipping less JavaScript

    View Slide

  5. @yourtwitter
    @mgechev
    ● Minification/dead code elimination
    ● Differential loading
    ● Code-splitting
    Shipping fewer bytes

    View Slide

  6. @yourtwitter
    @mgechev
    ● Minification/dead code elimination
    ● Differential loading
    ● Code-splitting
    Shipping fewer bytes

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  10. @yourtwitter
    Differential loading



    Differential loading






    View Slide

  11. @yourtwitter
    Differential loading



    Differential loading






    View Slide

  12. @yourtwitter
    @mgechev
    Differential loading
    ✅ Simple deployment infrastructure
    ✅ Proposal for a browser standard
    WHATWG

    View Slide

  13. @yourtwitter
    @mgechev
    ● Minification/dead code elimination
    ● Differential loading
    ● Code-splitting
    Shipping fewer bytes

    View Slide

  14. twitter.com/mgechev
    lazy-loading

    View Slide

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

    View Slide

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

    View Slide

  17. @mgechev

    View Slide

  18. @mgechev

    View Slide

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

    View Slide

  20. @mgechev

    View Slide

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

    ...
    ];

    View Slide

  22. @mgechev

    View Slide

  23. @mgechev

    View Slide

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

    View Slide

  25. twitter.com/mgechev

    View Slide

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

    View Slide

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

    View Slide

  28. @mgechev

    View Slide

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

    View Slide

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

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

    View Slide

  32. @mgechev

    View Slide

  33. @mgechev

    View Slide

  34. twitter.com/mgechev

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. 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,
    }
    ];

    View Slide

  39. 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,
    }
    ];

    View Slide

  40. 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,
    }
    ];

    View Slide

  41. @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]
    )

    View Slide

  42. @mgechev

    View Slide

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

    View Slide

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

    View Slide

  45. @mgechev

    View Slide

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

    View Slide

  47. @yourtwitter
    Angular projects
    without compression
    >27%

    View Slide

  48. @yourtwitter
    >80%
    Angular projects
    without CDN

    View Slide

  49. @mgechev

    View Slide

  50. @mgechev
    @angular/fire @azure/ng-deploy @zeit/ng-deploy

    View Slide

  51. @yourtwitter
    @mgechev
    Summary
    ● Reducing the bundle size
    ● Speeding up user navigations
    ● Predictive prefetching
    ● Automated deployment via CLI

    View Slide

  52. @mgechev
    Thank you!
    twitter.com/mgechev

    github.com/mgechev

    blog.mgechev.com

    View Slide