learn.svelte.dev site consumes too much memory on macOS

[kresnasatya]

I try to learn Svelte and SvelteKit in learn.svelte.dev. I see that this site use webcontainers API from Stackblitz. When I open the site in Safari browser version 16.5.1 macOS (MacBook Air M1 8GB), I check that it consumes more than 2GB of memory in this screenshot below.

In browser like Firefox it consumes around 1.3 GB of memory in this screenshot below.

I have send this issue in https://github.com/sveltejs/learn.svelte.dev/issues/407. The maintainer said that I should ask the Stackblitz team about this issue. I'm curious about the reason behind this issue.

I think the current solution is I use Firefox instead of Safari. Thank you.

[Nemikolh]

Hi @kresnasatya! :wave: Thanks for the report!

We've only added support for Safari a few months ago. So I'm not too surprised that memory usage is pretty high there.

Reducing memory usage is on our roadmap so eventually those numbers should go down :+1:

[kresnasatya]

Hi @Nemikolh, thanks for your information. Is that the roadmap publicly visible? If yes, where can I see the roadmap?

[benmccann]

We have a large number of users reporting that learn.svelte.dev crashes on Safari: https://github.com/sveltejs/learn.svelte.dev/issues/416

[Nemikolh]

Wow I lost track of that thread!

@kresnasatya, we put a roadmap for WebContainer there:

https://developer.stackblitz.com/platform/webcontainers/roadmap

@benmccann Thanks for the info! We are committed at reducing memory usage and over time you should see some improvements. :pray:

In the meantime, I wonder what could be done on your side. I had a quick look in Chrome (the reasoning should translate a bit to Safari?) and the esbuild process has a non-negligible amount of memory being retained.

Note that the 139MiB shouldn't be interpreted as the memory used by the esbuild webcontainer process, but as the memory retained. A huge chunk (the 63MiB in the screenshot) comes from shared memory.

Those 42MiB seems to be for Go's runtime and esbuild allocations and are not from shared memory. In my experience though it usually means that the WebWorker will use a more than that on the host.

And indeed killing the esbuild webcontainer process seems to reduce the memory used by the chrome process running the webcontainer by ~100MiB.

Ok, so maybe it's not viable but I was wondering if there was a way to skip esbuild for the tutorial environment. I seemed to recall that vite had an option to not use esbuild but I can't find that in the docs anymore so maybe I recalled that wrong.

[benmccann]

Thank you so much for the help @Nemikolh! I'd hoped we should be able to disable esbuild with the following options:

esbuild: false,
optimizeDeps: {
  disabled: true
}

I don't see it making a difference though. I think esbuild may have been adopted elsewhere in Vite like the new define feature. And setting esbuild: false will probably disable TypeScript support, which may not be what we'd want anyway.

I'm not sure how to find Go in the heap snapshot. If I just type "go" in the "class filter" it doesn't come back. I'm afraid I've never run learn.svelte.dev locally before today, so I'm a bit new to how this is all setup - though I was able to get it running quite easily by just following these instructions: https://github.com/sveltejs/learn.svelte.dev#developing-the-app.

The Go to WASM story isn't the best and esbuild will be replaced with rolldown in an upcoming version of Vite, so perhaps that will improve the situation.

[kresnasatya]

Hi, from future here. This day svelte.dev has move their learn.svelte.dev into svelte.dev/tutorial. I check again that when I interact with SvelteKit tutorial, the Web Container takes around 1.7GB of RAM (I open it on Safari). I'm curious, if we shift Vite (esbuild) to Vite (Rolldown), how much memory can be saved.