quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.76k stars 3.5k forks source link

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

Open rxdiscovery opened 2 days ago

rxdiscovery commented 2 days ago

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
      
      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.)
      
      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 commented 1 day ago

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

rxdiscovery commented 6 hours ago

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

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

Chrome memory profiling :

Screenshot from 2024-09-20 23-07-42

Firefox memory profiling :

Screenshot from 2024-09-20 23-08-29