Remix is hogging Macbook Air

[mehulmpt]

What version of Remix are you using?

1.4.3

Steps to Reproduce

We're migrating a small Next.js project to Remix. I'm using MacBook Air M1 2020 model to code Remix with barebones template starter using Cloudflare workers.

However, the moment I start the dev server with yarn dev, miniflare boots up and within a few minutes of coding Remix, the laptop gets extremely hogged. There's a noticeable drop in performance until and unless I kill the remix server. The moment the remix server is killed, everything is back to normal.

This is what happens to esbuild process anytime there is a small file change. It stays at 100-200% usage for 5-10 seconds, and then drops down to 60%.

In this whole process, coding on VSCode is impossible. The laptop is extremely laggy and I have to, unfortunately, shut down the Remix server to code, and then start to check output, then immediately shut down the server again because it makes M1 highly unresponsive.

Any idea how this can be debugged further?

Expected Behavior

Remix/esbuild should be smooth

Actual Behavior

Extremely slow and bad DX with Remix on macbook m1, even on small project

[herecydev]

I took the "Remix dev" barebones starter and everything is absolutely fine for me; all rebuilds take at most 40ms and memory/cpu is incredibly low and stable.

Looking at the screenshot you've provided, it doesn't seem to be one of the starters?

[kiliman]

That's surprising because I know the core Remix team all use M1 Macs. I see you're on 1.4.3. Have you tried the latest 1.5.1? What about node version, etc. I'm sure they would appreciate as much details as possible about your system.

[sergiodxa]

I think the issue could be wrangler/miniflare, I had a similar (not that slow) issue with Vercel CLI, the app took almost a second to rebuild, once I switched to stop using the Vercel CLI and use remix dev the build were around 50ms, this make me think the slowness could come from using the Cloudflare development CLI.

[justinnoel]

@mehulmpt Did you ever resolve this problem? I'm seeing something similar.

Just running wrangler pages dev ./public by itself is causing about 20% CPU utilization.

When I run with Remix, Tailwind, and Wrangler I'm seeing 50-60% CPU utilization before making changes to my code. As soon as I change a tailwind class, I jump up and stay well over 120% CPU utilization.

It's just becoming unbearable to work.

I've asked about the wrangler issue in their Discord and am waiting on feedback. I'm not sure if the Remix/Tailwind stuff is a separate problem or just the wrangler issue compounding with the additional processes running.

[mehulmpt]

No @justinnoel, unfortunately for our use case remix was extremely hard to migrate to. We spent about a couple of weeks trying really hard to fix a lot of underlying performance/compatibility issues but then eventually gave up. I wrote a blog post in June highlighting our frustrations with remix + cloudflare stack, maybe a lot of things are now fixed but we're not willing to try moving to remix again https://codedamn.com/news/remix/do-not-use-remix

[kiliman]

@mehulmpt Sorry you had a bad experience with Remix, but you seem to be the outlier, and not the norm as many developers have had a great experience with Remix. I use Cloudflare Workers (not Pages), and wrangler/miniflare is working fine for me.

@justinnoel When you save a route file with Tailwind classes, tailwind will rescan the content and regenerate the CSS file. However, this can result in double-builds. One, when Remix detects the change when you save the initial route file. Then the second one when tailwind changes the CSS file. If you're having slow builds, then this simply compounds the issue.

For most people, Remix esbuild is very fast, 50-200ms. Definitely sub-second builds. As @sergiodxa mentions, it may be an issue with the Cloudflare tooling.

I understand the frustration you may have, as ultimately you need to be able to build your product and any friction just gets in the way. I hope that when you have the opportunity, you give Remix another chance.

Good luck with your project!

[justinnoel]

@kiliman Thanks for the response. I love Remix & Cloudflare; so, I won't be moving on! I was just hoping mehulmpt had discovered a solution in the meantime.

This issue just cropped up recently and am pretty sure it's due to Cloudflare wrangler.

I was also digging into the Tailwind issue and wondering if I can overcome that double build issue. If I find a fix, I'll explain it here to help out any people with the issue in the future.

[justinnoel]

So, this whole issue seems to be caused by #2432.

All the old build *.css and *.js files cause wrangler to bog down and CPU utilization to skyrocket.

While in development, manually deleting previous build files after each change causes CPU utilization to drop back down to a normal 😢 20 to 25%. That's pretty lousy but it's much better than 120%+!

Now that exit-hook is updated to support async, I'll see if I can submit a PR for it.

[justinnoel]

UPDATE:

Now that exit-hook is updated to support async, I'll see if I can submit a PR for it.

Since exit-hook is ESM, getting it to work with Remix is beyond my skillset. There are several discussions about using dynamic imports. However, I can't figure out how to make it work with and compile into Remix.

Anyone up for this challenge?

[pcattori]

Fixed by #5223