Slow Hot Reload Times In Vite

[sam-frampton]

Hey, thanks for making the library.

I've been using Macaron plugin with Vite in a medium size TS Monorepo project with a React Project. After introducing the plugin library to Vite project I've noticed my hot reload times have increased substantially to 30-60 secs.

These hot reload times are bigger than when I used library such as Chakra UI with Vite in the past. To be truthful, I'm no expert in debugging hot reload speed problem but from what I can see in my network tab, the lag in web-page rendering is when the macaron plugin transpiles code.

Packages

"vite": "^3.0.9"
"@vitejs/plugin-react": "1.3.2"
"@macaron-css/core": "^0.1.10"
"@macaron-css/react": "^0.1.10"
"@macaron-css/vite": "^0.1.12"

My current Vite config

import { defineConfig } from 'vite';
import { macaronVitePlugin } from '@macaron-css/vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [macaronVitePlugin(), react()],
  server: {
    port: 3000
  },
  build: {
    target: 'esnext'
  },
  optimizeDeps: {
    esbuildOptions: { preserveSymlinks: true }
  }
});

Can you offer any tips or suggestions to get the hot reload times down?

[Mokshit06]

Hey, macaron shouldn't be affecting your HMR times this much unless its also evaluating the code that is not required. One of the ways I've encountered this is when using barrel exports and imports, i.e. export * in a file and then importing that file and using it's exports inside style declarations.

If this doesn't fix your issue I'll be happy to look at a reproduction if that's something that's possible.

[sam-frampton]

@Mokshit06 Hey thanks for the tip. I think it's most definitely evaluating code that is not required. I currently have a UI folder that exports a lot of components that I import in other components in my React App.

Each time a component my app begins to HMR for an abnormal amount of time. I'll take your advice and remove barrel imports inside other style declarations. If the issue persists I'll send a reproduction.

Many thanks for responding

[sam-frampton]

@Mokshit06 I can confirm it was the barrel imports! It's nice blazingly fast again 🎉