quasar icon indicating copy to clipboard operation
quasar copied to clipboard

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

Open rxdiscovery opened this issue 5 months ago • 4 comments

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
    • 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>
  1. run de projet in dev mode ( quasar dev )
  2. open Firefox browser ( http://localhost:9000/ )
  3. 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.)

https://github.com/user-attachments/assets/0ef4e238-5900-44fc-a4b3-491cfea95106

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 avatar Sep 18 '24 16:09 rxdiscovery