quasar
quasar copied to clipboard
Lag and crash in dev mode with Firefox (+ demonstration video)
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?
-
create a new quasar project ( yarn create quasar )
-
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
-
open the project with VSCode
-
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>
- run de projet in dev mode ( quasar dev )
- open Firefox browser ( http://localhost:9000/ )
- 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