Vite: Vite dev server is slow to load TailwindCSS

[jamiesteven]

Describe the bug

When using Vite in development mode and importing TailwindCSS as a JavaScript import, loading the main.css?import file takes much longer than expected. Typically about ~800ms on my new MacBook Pro. Browser inspector shows that the majority of that wait is "Waiting" and not transfer of the somewhat larger (~1.81MB) file.

I'm not certain this is a bug, but perhaps there is an opportunity for optimization here. This isn't an issue during production build as PurgeCSS can be used to remove unused classes. For comparison, using my prior build tool, Parcel, this was 100ms or less.

Reproduction

git clone https://github.com/posva/vite-tailwind-starter.git
cd vite-tailwind-starter && npm install
npm run dev

In new shell:
curl -o /dev/null -s -w 'Total: %{time_total}s\n' 'http://localhost:3000/main.css?import'

System Info

• vite version: 0.20.7
• Operating System: macOS 10.15.5
• Node version: 14.4.0
• npm/yarn version: 6.14.5

Logs (Optional if provided reproduction)

vite:rewrite (cached) /main.css?import +7s

[yyx990803]

This should be addressed by a792610

But it seems you have "disable cache" ticked in your Networks tab. It's best to enable HTTP cache when using Vite even during dev for better performance.

[jamiesteven]

Fix works great. Thanks Evan! I'm loving everything in Vite and Vue3!