Troubleshooting
Most browsers nowadays ship with good tools to help with performance issues in applications. Chrome and Firefox both contain tools to inspect memory and profile execution. There are extra extensions that may be helpful too, such as Lighthouse.
Some browser extensions can impact performance. The vue-devtools development extension for Vue, for instance, may cause memory leaks, as it holds reference for some objects to show Vuex transactions and components properties.
Check for other extensions, and try a browser in incognito, or in a profile without any extensions.
There are many things that may impact the application performance, including memory use. Use the browser development tools to look at how well the application performs.
- test without a running workflow
- does the memory issue happens in specific views, or in only certain views?
- does it happen with old versions of the UI?
You can also use other tools such as taking snapshots and profiling to accompany the memory use.
You should be able to plot the memory pattern too. It is normal that the memory use goes up a little. But after a while the garbage collector must have collected some objects, and the memory must go down.
There are other things you can look for too when you suspect of memory leaks. Event listeners are common source of memory problems. Detached elements too.
You can have a code problem. Something that prevents objects of being collected.
Or you could have a component that is being updated too frequently. Take a look at extensions to monitor when components are being rendered.
Vue is great for reactivity. But if you have reactivity where it is not necessary, you may be putting extra load on the browser to monitor things that are not necessary. Each data or computed value used produces an observer/proxy, that keeps looking after objects for changes, and notifying its listeners.
Things like creating frozen objects can be helpful.