Repository navigation
HMR is really slow when there are a lot of Vue components with <style> #7480
Description
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:
- Clone the repo
- Run
npm install - Run
composer install - Open
laravel-vue-vite-tailwind-slow.testif you're using Valet - Run
npm run devto start the Vite dev server - Switch between
with-style-tags,without-tailwindandwithout-style-tagsto 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:
Activity
gufoe commentedon 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 commentedon 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
tailwindcssto 3.0.9 there, it seemed to work as expected.hivokas commentedon Feb 17, 2022
Thanks for mentioning that! I'll downgrade to
3.0.9until this issue is fixed.