Quasar CLI Vite multiple page reloads on cold start (no .q-cache)

[philfontaine]

What happened?

When running quasar dev for the first time (no cache), the page will reload multiple times for no apparent reason. I'm pretty sure that this impacts the cold start time of my project. These reloads don't happen on subsequent quasar dev.

This is happening on all the projects that I migrated to the new CLI.

The below is a typical scenario. You can see that it took about 30 seconds. I'm fine with it being long because of the size of the app, but I'm pretty sure these reloads are really not helping.

I reproduced it on a simple app created with create quasar. You can see that this is much less impactful on the render time since the app is really small, you can still see the multiple reloads.

In the network tab, you can actually see that the reload is caused by a websocket request of type full-reload.

What did you expect to happen?

No unnecessary reloads.

Reproduction URL

https://github.com/philfontaine/quasar-vite-reload-bug

How to reproduce?

I provided a repro because it's mandatory but it's just a simple quasar app. There is electron in there but it's not used or related to this bug.

1. Create a quasar app.
2. Delete node_modules\.q-cache
3. quasar dev
4. Open the dev tools and make sure you have Preserve Log checked to see the multiple reloads.

Flavour

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

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.19044) - win32/x64
NodeJs - 16.13.2

Global packages
  NPM - 8.1.2
  yarn - 1.22.17
  @quasar/cli - 1.3.0
  @quasar/icongenie - 2.3.0
  cordova - 9.0.0 (cordova-lib@9.0.1)

Important local packages
  quasar - 2.6.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.0.0-beta.8 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.13.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  pinia - Not installed
  vuex - Not installed
  vite - 2.8.6 -- Native-ESM powered web dev build tool
  eslint - 8.11.0 -- An AST-based pattern checker for JavaScript.
  electron - 17.2.0 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[rstoenescu]

Vite decides these reloads while it discovers your deps. It's outside of our reach.
However, I'll soon update q/app-vite to use Vite 2.9 (it's currently in beta, so when it gets out of the beta). One of the highlights of this release is that they improved the deps management quite significantly, so it'll solve your problem.

PS: I'm on a Mac with M1. Takes about 2.5s to cold start your project with current Vite 2.8.6

[therealcoder1337]

thank you for your work!
this issue improved somewhat with the latest releases, but it still exists. the DX is just much slower compared to the webpack variant. sure, starting the dev server is much quicker, but navigating the app is overall slower and more annoying.
does quasar plan to support webpack long term? because i am thinking about switching back from vite to webpack, if so.

[rstoenescu]

@therealcoder1337 yes, q/app-webpack and q/app-vite are both long term packages.

[kirschkern]

I have the same issue. I use "@quasar/app-vite": "^1.0.2",
Every time I start the dev server (quasar dev) the page loads 3 times before displaying the page. There is an error message in the console
Uncaught (in promise) TypeError: error loading dynamically imported module

This happens with both firefox 101 and chrome 103

I see the following lines beeing red in the network protocoll so they could not be loaded:

https://localhost:8094/node_modules/.q-cache/vite/spa/deps/axios.js?v=eb4d01d5
https://localhost:8094/node_modules/.q-cache/vite/spa/deps/crypto-js.js?v=635f0e33
https://localhost:8094/node_modules/.q-cache/vite/spa/deps/crypto-js_aes.js?v=e2ea9fb7

Interesting: The v-param is different for all these files

After the automatic reload the same files will be loaded - but with a new and common v-param

https://localhost:8094/node_modules/.q-cache/vite/spa/deps/axios.js?v=43ed7cbe
https://localhost:8094/node_modules/.q-cache/vite/spa/deps/crypto-js.js?v=43ed7cbe
https://localhost:8094/node_modules/.q-cache/vite/spa/deps/crypto-js_aes.js?v=43ed7cbe