Vite HMR unusably slow

[adaboese]

Description

Sometimes re-loading page takes upwards of 30 seconds, or even longer.

The only thing that helps is downgrading to v0.20.

$ PANDA_DEBUG=* pnpm panda debug

JS Framework

Remix

Panda CSS Version

v0.22-v0.25

Browser

Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

CC @astahmer @segunadebayo

[astahmer]

I'd love to help but I really need a minimal reproduction on this one :(
if you can't provide one, then maybe you could show me the github repository ?

[adaboese]

Let me see what I can do. Give me 30 minutes.

[adaboese]

Removing bunch of files from the project made the issue go away 🤦‍♀️

Not sure how to isolate this if the issue only exists when all project files are there.

[astahmer]

when looking at the panda debug logs I couldn't find any file taking too long, but that's only regarding the parsing/extraction steps, is the CSS step long for any of those ? then maybe one of those files is causing somehow issues

if the project is private and you have the rights/feel ok to do so, feel free to invite me so I can look at it even without it being a minimal repro

[adaboese]

I am still trying to create isolated example, but these are some of the logs that caught my eye when using DEBUG=* and testing.

🐼 debug [hrtime] Parsed /Users/ada/Developer/adaboese/aimd/app/routes/app/projects/$articleProjectId/sources/_route.tsx (25.28ms)
🐼 info [hrtime] Extracted in (25.56ms)
  vite:hmr [self-accepts] app/global.css +1s
  vite:import-analysis 0.96ms [0 imports rewritten] app/global.css +1s
  vite:transform 1158.51ms /app/global.css +9s
  vite:time 1160.19ms /app/global.css +8s
  vite:cache [memory] virtual:remix/hmr-runtime +10s

takes over 1 second to transform /app/global.css

For context, that's the contents:

@layer reset, base, tokens, recipes, utilities, overrides;

@layer reset {
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    outline: none;
    resize: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@layer base {
  html,
  body {
    max-width: 100vw;
    font-size: 18px;
    line-height: 1.6em;
  }

  body {
    color: #fff;
    background: #111;

    --font-fallback: "Red Hat Text Variable";
  }
  
  strong {
    font-weight: 600;
  }

  /* ::selection {
    color: #fff!important;
    background-color: #000!important;
  } */

  /* a {
    color: #3740ff;
  } */
}

  vite:import-analysis 3.84ms [22 imports rewritten] app/routes/app/projects/$articleProjectId/sources/_route.tsx +1ms
  vite:transform 1207.66ms /app/routes/app/projects/$articleProjectId/sources/_route.tsx +49ms
  vite:time 1208.76ms /app/routes/app/projects/$articleProjectId/sources/_route.tsx +48ms
  connect:dispatcher viteTimeMiddleware  : /app/routes/app/projects/$articleProjectId/sources/_route.tsx?import&t=1704668893389 +1s

🐼 info [hrtime] Extracted in (0.12ms)
  vite:import-analysis 1.11ms [0 imports rewritten] app/global.css +963ms
  vite:transform 926.00ms /app/global.css +962ms
  vite:load 4.43ms [fs] /app/routes/app/projects/$articleProjectId/sources/_route.tsx +954ms

  vite:import-analysis 2.07ms [26 imports rewritten] app/routes/app/projects/$articleProjectId/sources/_route.tsx +33ms
  vite:transform 4.53ms /app/routes/app/projects/$articleProjectId/sources/_route.tsx +33ms
  vite:time 2084.27ms /app/projects/1538/sources?_data=routes%2Fapp%2Fprojects%2F%24articleProjectId%2Fsources%2F_route +2s

I also noticed that immediately after I restart the remix server, things are relatively fast. Took in this case ~3 seconds to see update. It only gets slower as I do some more development. Maybe some index is getting crowded?

[adaboese]

Yeah, the longer I work on the project, the longer that step becomes. This is updating the same page, but after ~30 minutes of working on the app:

🐼 debug [hrtime] Parsed /Users/ada/Developer/adaboese/aimd/app/routes/app/projects/$articleProjectId/sources/_route.tsx (14.51ms)
🐼 info [hrtime] Extracted in (14.73ms)
  vite:hmr [self-accepts] app/global.css +7s
  vite:import-analysis 0.92ms [0 imports rewritten] app/global.css +7s
  vite:transform 7421.89ms /app/global.css +24s
  vite:time 7423.82ms /app/global.css +23s
  vite:cache [memory] virtual:remix/hmr-runtime +23s

The same step has gone from ~1 second to 7 seconds, and it is only getting worse every time I make an update to the page.

so it def looking like it is some sort of cache issue.

The good news that now I at least know I can just restart the server to reduce page load times from what sometimes becomes a whole minute.

[astahmer]

are you using the postcss plugin ? if so, can you reproduce the issue when using the CLI instead ?

in the panda debug logs I can see those folders which are probably unrelated to Panda:

• app/hooks
• app/jobs
• app/routines
• app/services
• app/utilities
• app/zodSchemas

can you tweak your config.include or config.exclude and see if you still reproduce this issue ? you most likely only need app/components and app/routes

If you still reproduce the issue after those steps, I'm going to need a reproduction to investigate further

[adaboese]

Oh wow, this is amazing. Now the HMR is instant.

I don't how the postcss plugin works, but I would def recommend this setup instead.

Even with Panda 0.20, when it felt like postcss plugin is working as expected, it wasn't this fast.

This is great. Thank you

[astahmer]

yeah those last versions we published contains huuuge perfs gains so I was a bit surprised to see your issue 😅
I'm glad it works for you ! 🙏

I'm still a bit curious to know what was the issue, but I guess that's also fine if we can't reproduce it anywhere else

[MatheoJaouen]

@astahmer hello! I'm actually reproducing it.
Is this setup (CLI) is now the one recommended? https://panda-css.com/docs/installation/cli#import-the-generated-css
I'm facing the same issue with the PostCSS plugin I had to go the CLI way. Otherwise the HMR is very slow not suitable for development.
Was if fixed/will be fixed in the lastest versions?
Thank you!

[astahmer]

please update to the latest version, you can also try using lightningcss: true in your config
if the problem persists, open a new issue with a minimal repro that shows the performance issues with the postcss plugin 🙏

[MatheoJaouen]

Will do (update). Thank you!