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

Tools for fast Angular applications

Tools for fast Angular applications

Minko Gechev

November 11, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. View Slide

  2. Tools for Fast Angular Applications
    Improving the time to interactive of your app
    Minko Gechev
    @mgechev

    View Slide

  3. Practices for speed
    automated with the Angular CLI & schematics
    Code-splitting Efficient serving
    Bundle Preloading

    View Slide

  4. View Slide

  5. View Slide

  6. Practices for speed
    automated with the Angular CLI & schematics
    Code-splitting Efficient serving
    Bundle Preloading

    View Slide

  7. Automatic code-splitting
    Angular CLI version 8.1
    $ ng g module about --route about --module app

    View Slide

  8. Automatic code-splitting
    Angular CLI version 8.1
    $ ng g module about --route about --module app
    module name

    View Slide

  9. Automatic code-splitting
    Angular CLI version 8.1
    $ ng g module about --route about --module app
    lazy-route path

    View Slide

  10. Automatic code-splitting
    Angular CLI version 8.1
    $ ng g module about --route about --module app
    parent module name

    View Slide

  11. View Slide

  12. Generated a lazy-route
    • Defined an NgModule
    • Declared a lazy-route
    • Declared a default route
    • Defined a component

    View Slide

  13. View Slide

  14. View Slide

  15. Practices for speed
    automated with the Angular CLI & schematics
    Code-splitting Efficient serving
    Bundle Preloading

    View Slide

  16. View Slide

  17. ngx-quicklink
    • Detects links in the viewport
    • Waits until the browser is idle
    • Checks user’s connection
    • Prefetches the lazy modules

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. Practices for speed
    automated with the Angular CLI & schematics
    Code-splitting Efficient serving
    Bundle Preloading

    View Slide

  22. View Slide

  23. View Slide

  24. • ng add a platform module
    • Run ng deploy
    Deployment via Angular CLI
    Introduced in CLI v8.3

    View Slide

  25. View Slide

  26. Supported platforms
    for automatic deployments via the Angular CLI
    @angular/fire @azure/ng-deploy @zeit/ng-deploy
    angular-cli-ghpages @netlify-builder/deploy ngx-deploy-npm

    View Slide

  27. Practices for speed
    automated with the Angular CLI & schematics
    Code-splitting Efficient serving
    Bundle Preloading

    View Slide

  28. Practices for speed
    automated with the Angular CLI & schematics
    Code-splitting Efficient serving
    Bundle Preloading

    View Slide

  29. Practices for speed
    automated with the Angular CLI & schematics
    Code-splitting Efficient serving
    Bundle Preloading

    View Slide

  30. Practices for speed
    automated with the Angular CLI & schematics
    Code-splitting Efficient serving
    Bundle Preloading

    View Slide

  31. View Slide

  32. Thank you!
    Minko Gechev
    @mgechev

    View Slide