Tools for fast Angular applications

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