Search code examples
angularangular-pipe

How to determine reason of slow performing Angular app?


Disclaimer: project is a web-component that created with Angular 13.

In test environment I see that any UI changes come with a solid lag: 1-2 seconds. In meantime, no background API calls or errors are seen.

How do you even find a reason for this?

For options that I considering now: Switch all functions inside template to pipes (is it worth the time? I read mixed articles about it. Some say it's a strict necessity, some - that performance wouldn't change).

Is that any debug tools that could be used for this case?


Solution

  • Angular DevTools are a perfect solution to your problem.

    It allows you to easily debug and profile your Angular application and single components.

    Switch all functions inside template to pipes (is it worth the time? [..])

    If the function(s) in question do some computing it's a good time invest to switch it over to pipes. Pipe functions are memoized and basically "store" the previous results of a calculation for a given set of inputs (unless you define the functions not to be pure).

    To further help you solving the performance issues we'd need to see your code.