Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HMR is really slow when there are a lot of Vue components with <style> #7480

Closed
hivokas opened this issue Feb 15, 2022 · 3 comments · Fixed by #7524
Closed

HMR is really slow when there are a lot of Vue components with <style> #7480

hivokas opened this issue Feb 15, 2022 · 3 comments · Fixed by #7524
Assignees

Comments

@hivokas
Copy link
Contributor

hivokas commented Feb 15, 2022

What version of Tailwind CSS are you using?

3.0.22

What build tool (or framework if it abstracts the build tool) are you using?

vite 2.8.2

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

With <style> tags (slow): https://github.com/hivokas/laravel-vue-vite-tailwind-slow/tree/with-style-tags
With <style> tags, without Tailwind (fast): https://github.com/hivokas/laravel-vue-vite-tailwind-slow/tree/without-tailwind
Without <style> tags, with Tailwind (fast): https://github.com/hivokas/laravel-vue-vite-tailwind-slow/tree/without-style-tags

How to run the reproduction:

  1. Clone the repo
  2. Run npm install
  3. Run composer install
  4. Open laravel-vue-vite-tailwind-slow.test if you're using Valet
  5. Run npm run dev to start the Vite dev server
  6. Switch between with-style-tags, without-tailwind and without-style-tags to see the difference

Describe your issue

HMR works really slow when there are a lot of Vue components with <style>.

Here is the detailed demo:

TailwindIssue.mp4
@gufoe
Copy link

gufoe commented Feb 16, 2022

I am having the same issue on a large project:
The HMR is reloading ALL vue components that are using the @apply directive in the style section, instead of just loading the one that has changed.
My very basic reproduction repo is this where you can easily see that editing comp1.vue will trigger the hmr for comp2.vue which is totally unrelated.

@calmyournerves
Copy link

calmyournerves commented Feb 17, 2022

Hey there!

I have described a performance regression we have experienced in #7454 (discussion). The change that caused this for us was introduced in 3.0.10 (PR #6580). I could reproduce your problem with the reproduction repo of @gufoe. When downgrading tailwindcss to 3.0.9 there, it seemed to work as expected.

@hivokas
Copy link
Contributor Author

hivokas commented Feb 17, 2022

When downgrading tailwindcss to 3.0.9 there, it seemed to work as expected.

Thanks for mentioning that! I'll downgrade to 3.0.9 until this issue is fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants