Fast Angular Apps from End to End

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