search

protibimbok / django-vite-plugin

This plugin configures Vite for use with Django backend.
101 stars 13 forks source link

HMR dev server connection is very slow on Firefox #13

Closed nshafer closed 1 year ago

nshafer commented 1 year ago

Hi, thank you for the module. I've been evaluating it for use in a project, and have hit a bit of a snag. I include the {% vite %} tag in my template so that the HMR dev server connects. This works perfectly fine on Chrome, but in Firefox it hangs for anywhere from 5 seconds to over a minute before it finally says, "[vite] connected. In the console:

11:37:19.507 [vite] connecting... [client.ts:18:8](http://127.0.0.1:5173/@vite/client.ts)
11:37:30.471 [vite] connected. [client.ts:133:14](http://127.0.0.1:5173/@vite/client.ts)

I was able to replicate this with your example as well. But I'm not able to replicate it with a default Vite/Vue project created with npm create vite@latest. In that case, after running npm install and npm run dev the HMR client connects immediately in Firefox. Since the django-vite-plugin plugin for Vite does some stuff with the server, I'm guessing it's something in there, but I have no knowledge of Vite plugin stuff.

If it helps, I'm running Ubuntu Jammy 22.04.

$ python --version
Python 3.10.6
$ pip list
Package            Version
------------------ -------
asgiref            3.6.0
Django             4.2.1
django_vite_plugin 1.1.1
pip                22.0.2
setuptools         59.6.0
sqlparse           0.4.4
wheel              0.37.1
$ node --version
v18.16.0
$ npm list
example@0.0.1 /mnt/data/projects/django/django-vite-plugin/example
├── @vitejs/plugin-vue@4.2.1
├── autoprefixer@10.4.14
├── django-vite-plugin@1.1.3
├── glob@9.3.5
├── postcss@8.4.23
├── sweetalert2@11.7.5
├── tailwindcss@3.3.2
├── vite-plugin-inspect@0.7.26
├── vite@4.3.5
└── vue@3.2.47

Firefox is 112.0.2 (64-bit).

Thanks for the help.

protibimbok commented 1 year ago

Can you please provide me a way of re-creating this? I've tried with the given example, but everything seems to work fine. The difference being - there is no log message in the Chrome.

Since the django-vite-plugin plugin for Vite does some stuff with the server, I'm guessing it's something in there, but I have no knowledge of Vite plugin stuff.

Just to make you understand this plugin better, I did not do anything with the Vite server itself. This plugin is mostly providing some configurations and linking them with the Django. When you run

npm run dev

You should've seen some message like Loading configurations.... This is because of the plugin. Other than that, this plugin shouldn't interfere with the browser connection/requests.

There's another possible explanation, that is caching method of Chrome & Firefox. If the message is shown while the loading indicator of the browser still indicates loading, then it's probably for caching. (If assets are cached then the page does not need to wait for the assets to be fetched. In the Django development server, sometimes these requests take 5s+ time depending on your computers capability and other stuff).

But if the message is shown after the loading is finished then please provide me with a way to replicate this.

nshafer commented 1 year ago

Well, embarrassingly, I can't duplicate it today either. It's now connecting within milliseconds in both browsers. I have no explanation... yesterday I was pulling out my hair trying to figure it out, and nothing then seemed to change it.

BTW, it's a console.debug() statement in the Vite dev code, so you have to enable Debug messages in the console in Chrome to see them. It's in the top right of the dev tools console, in a dropdown that probably says "Default levels" for you if you haven't changed them. I think FF has Debug messages enabled by default, or else I just had it enabled already.

So I guess nothing to do... I'll see if it recurs and try to figure out maybe what is going wrong on my system. Which is a 6-core CPU with 32gb memory, so I don't think it was a general performance problem.

But to answer your question, I just cloned your repo, created a virtualenv (with virtualenv-wrapper's mkvirtualenv), pip installed django and django-vite-plugin, made the modification to example/vite.config.js as outlined in the example/README.md, ran npm install and npm install django-vite-plugin, and then ran python manage.py runserver and npm run dev. Connected to "http://localhost:8000" in both FF and Chrome to see the behavior.

Anyways, I will close this issue for now... I'll reopen if it recurs and I have any more information. For now I guess it was something wrong with my system. Thank you for your time.