We have created an Ionic 7 + Vue 3 app (Options api. No Typescript. Build to both iOS and Android).
Currently we are experiencing a memory leak that is causing crashes after using the app for a few minutes.
We have followed the documentation while setting up ionic but had to make a few modifications to the routing to suit our clients requirements. We have a login and homepage (where projects are retrieved via an API). Here you can choose which project to inspect. When inspecting a project you have a page with a tab bar allowing you to inspect different parts of a project (3 pages with different lists of repeating components displaying different data). Each item in this list can be inspected.
This means we have 3 pages:
login
home
projectInfo
And a tabbar with 3 tabs:
info
activities
plans
The plans can be inspected and show a interactive environment for which the data can be around 50 ~ 100 mb to load.
The issue appears when we switch between home and projectinfo page multiple times (it speeds up a lot when we inspect the plans). We can see in the dev-tools and Android studio profiler that the html elements (ionic elements) are being cached but never reused or cleared. This means that each time we switch pages all elements are cached (each time). We have seen the memory usage go up to ~500mb before crashing on iOS.
In this image you can see that the JS heap size, DOM elements and event listeners increase when switching pages. But they never drop back down. With ionic elements - Album on Imgur
In the second image we replaced all ionic elements with plain html and we can see that it does drop after a short amount of time. Without ionic elements - Album on Imgur
We have done quite a bit of research and we found other people with the same issue but we haven’t found an acceptable solution yet (for example: How to disable cache for a single ion-content or component? - #17 by rapropos). We also have applied all tips we have found so far. This includes manually un-setting the data in Vue’s unmount / beforeUnmount, variable references between components and component references are now absolute minimal, lazy loading of components has been applied where needed, Virtual scrolling (so it has less html in the lists). But none of these options have actually fixed the issue.
The only thing that we found out that solves this issue would be to replace all ionic elements with normal html and Vue. This of course will cause a lot of different issues with compatibility between Android and iOS.
I cant believe that this is an issue on Ionic’s side and I’m looking for more solutions and/or possible causes. Does anyone have an idea or explanation?
