Lag and crash in dev mode with Firefox (+ demonstration video)

[rxdiscovery]

What happened?

Hello,

for some time now, when I launch a web application made with quasar (quasar dev) with Firefox as the browser, the application starts to lag after 1 min of use, and crashes after about 1 hour.

this only happens in Dev mode, when I build in production mode the problem disappears. (or perhaps it's taking a while to appear in production mode)

I even tested it with an empty project, and it's the same problem.

What did you expect to happen?

Normally, the application should run without lag and should not crash over time.

Reproduction URL

https://codepen.io/rstoenescu/pen/xxEvBLR

(dev mode is mandatory with a connection to the IDE, so this link is just for the Bot to accept the post)

How to reproduce?

1. create a new quasar project ( yarn create quasar )

2. select the following options:

   • App with Quasar CLI, let's go!
   • Quasar v2 (Vue 3 | latest and greatest)
   • Typescript
   • Quasar App CLI with Vite 2 (stable | v1)
   • Composition API with <script setup>
   • Sass with SCSS syntax
   • features :
     • Linting (vite-plugin-checker + ESLint + vue-tsc)
     • State Management (Pinia)
     • axios
     • vue-i18n
   • Prettier

3. open the project with VSCode

4. modify the code of the indexPage.vue page with this one:

<template>
  <q-page class="row items-center justify-evenly">
    <q-select v-model="selectedItem" outlined label="Items" :options="listItems" style="width: 120px;"></q-select>
  </q-page>
</template>

<script setup lang="ts">
import { Ref, ref } from 'vue';

defineOptions({
  name: 'IndexPage'
});

const selectedItem: Ref<string> = ref('');
const listItems: Ref<string[]> = ref([]);

for (let i = 0; i < 100; i++) {
  listItems.value?.push('item' + i);
}
</script>

5. run de projet in dev mode ( quasar dev )
6. open Firefox browser ( http://localhost:9000/ )
7. do as in the video :

(on the video I'm going to open the Q-select and move the mouse, the first minute the Select and its animations are very responsive, but then the lag starts, and around 4min the application becomes so slow that it's no longer usable, and if I continue for 1h it will eventually crash.)

Kazam_screencast_00003.mp4

if you don't want to watch the whole video, watch the first 20 seconds and compare with the 4min +.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox

Quasar info output

No response

Relevant log output

No response

Additional context

Quasar version : 2.17.0
Vue version : 3.5.5 & 3.5.6
Os: Ubuntu
GPU : Nvidia GEFORCE 3080 RTX
CPU : Ryzen 9 (5000 series) 24 Cores
RAM : 32 Go
Borwser : Mozilla Firefox Snap for Ubuntu [canonical-002 - 1.0] 130.0 (64 bits)

important note :

I created the project with vite 2, vite 5 beta and webpack, it's the same problem with Firefox.

isn't this caused by the Websocket connection of the debug mode with Vite client (or webpack)? since in production mode there is no lag.

Thanks in advance

[rxdiscovery]

there's also a discussion here vuejs/core#11901 with the Vue team about this problem, I hope we can find the cause soon. (is it related to Quasar? or Vue?)

[rxdiscovery]

There is a leak, it is located at the level of :

node_modules/@vue/shared/dist/shared.esm-bundler.js

but what causes it?

Chrome memory profiling :

Firefox memory profiling :

[rxdiscovery]

@rstoenescu Is there a way with quasar cli to choose an older version of the framework to see if this problem has existed for a long time or if it is related to a specific version of quasar/vue?

Can anyone help? This is a pretty serious problem, if applications made with Quasar start to crash over time due to memory leaks.

[psarin]

Any news on this one? I'm having similar issues with significant memory leaks, but on Microsoft Edge. Very similar stack trace as shown above.

Started when upgraded to VueJS 3.5.6 from 3.4.38. Since there were known, documented memory leaks with 3.5.5/3.5.6 due to reactivity, I tried upgrading to 3.5.8 where these were supposedly resolved for non-Quasar apps. However, memory issues still persist and I've tried downgrading all the way down to 3.5.1 without success.

On VueJS Github, someone brings up issue of memory leak using Quasar with VueJS 3.5.x. Wonder if all of these issues are due to Quasar UI using VueJS 3.5.5 as a dependency? Would it be possible to update this dependency?