I'm experiencing extremely slow hot reloading times in my Next.js 14 project that uses TailwindCSS, Shadcn, and React Icons. Here is a list of all my installed packages:
radix-ui/react-separator@1.0.3
radix-ui/react-slot@1.0.2
types/node@20.11.24
types/react-dom@18.2.20
types/react@18.2.63
autoprefixer@10.4.18
class-variance-authority@0.7.0
clsx@2.1.0
eslint-config-next@14.1.2
eslint@8.57.0
lucide-react@0.344.0
next@14.1.2
postcss@8.4.35
react-dom@18.2.0
react-icons@5.0.1
react@18.2.0
tailwind-merge@2.2.1
tailwindcss-animate@1.0.7
tailwindcss@3.4.1
typescript@5.3.3
After creating a new Next.js project, enabling TypeScript, ESLint, Tailwind, and app router, I noticed the reload times were normal.
However, upon installing Shadcn (so far, only used the separator component) and adding React Icons, I created 3 components: a navbar, a search bar (inside the navbar), and a footer, all styled with Tailwind. Now, the initial compilation time ranges from 10 to 25 seconds, and each minor change requires another 6 seconds or so for hot reloading.
I've looked through numerous issues, threads, and posts about similar performance issues, but none of the suggested solutions have worked for me. When I comment out the navbar and footer, compilation time dramatically drops to approximately 1 second.
I initially thought the issue might be related to how I imported icons, but removing them didn't make a difference.
I suspect Tailwind might be causing the issue, but I'm unsure if this poor performance is normal for Next.js projects. Comparatively, using Vite or Svelte results in almost instant hot reload times. I also tried using pages router, which slightly improved the situation, but hot reloading still took several seconds.
Is there any way to fix this issue? With this much delay it's becoming unusable.
Edit: I tested it on my low-end laptop and the times were ~5x higher. I then tested it on another PC with 32GB RAM (mine has 16GB) and it compiled in 200ms. The other main difference between those PCs is the OS. Mine has Windows 11 and the other one has Windows 10.
Turns out the bottleneck was caused by my antivirus. After adding my project's folder to the exceptions list compilation times returned back to normal.