Live Mode in Team is maxing out CPU

[sairam]

🐛 bug report

Sandbox UI is maxing out my CPU causing slowness in UI and productivity.

Your Environment with material-ui

Software	Name/Version
Сodesandbox	create-react-app
Browser	Chrome 68.0.3440.75
Operating System	Mac OS X High Sierra

Google Chrome Helper is using up 400% of CPU when I edit a sandbox when its part of a 'Team Sandbox'. It does not consume as much CPU (works fine) when its part of 'My Sandboxes'.
I have a team member who is invited but not accepted the invite.

I understand the rationale behind not being able to disable 'Live' if a project is part of a team in order to avoid code conflicts and unable to use 'VIM' mode in Team settings.

I have profiled CPU usage and it points to the Babel Transpiler javascript file. I am able to reproduce this issue with my current private project (in my account). Let me know if you need any additional information.

[CompuIves]

Heh, this is an interesting issue. My one explanation could be that it could maybe because of live operations being sent around, but then the babel-transpiler should not be maxing out. Really weird, the babel transpiler nor the bundler knows the difference between live/non-live env.

I'll do some debugging on this!

[CompuIves]

Does it happen from the start? And does it happen when you're idle or only while editing?

[sairam]

It happens within few seconds of start of editing the file. It continues when I am idling as well.

…

On Sat, Jul 28, 2018 at 6:15 PM, Ives van Hoorne ***@***.***> wrote: Does it happen from the start? And does it happen when you're idle or only while editing? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1011 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ_AMVTZ3GmJdR4-owWoOcqI2FLjcp6ks5uLF0GgaJpZM4Vjs4a> .

[sairam]

Hi @CompuIves ,

You can find it here https://codesandbox.io/s/km040v81o7

The minimal reproducible project is when I add 2 dependencies (@material-ui/core and @material-ui/icons) to a React Project.

Once you I start editing and then in idle, the CPU continues to be maintained at the highest possible value.

[CompuIves]

Okay, found the issue! This was super interesting.

We have fs in the babel transpiler, for babel plugin/preset support. Because of this, the transpiler needs access to the file system of the sandbox. However, the transpiler is in a web worker. That's why we eagerly sync all files over from the original main thread to the worker. In this case this was a lot of files, as material-ui includes its icons as well.

So, I made it non-eager. Meaning that it will only start syncing when a custom babel plugin or preset is required. This should improve memory usage/performance for all sandboxes!

[CompuIves]

It will be live in ~15 min.

[sairam]

Amazing. Thank you very much for debugging this.

…

On Sat, Jul 28, 2018, 22:16 Ives van Hoorne ***@***.***> wrote: It will be live in ~15 min. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1011 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ_ACVqCx6ISFYr4RXkY9LUbGWTTGChks5uLJVXgaJpZM4Vjs4a> .

[CompuIves]

It's live! You might need to invalidate your service worker to see the changes immediately.