Feature request: performance improvements

[danilowoz]

This issue aims to centralize all concerns related to performance and what actions Sandpack is taking to solve them.

How to skip the transpiled step? Or how to load pre-transpiled code?
We have already addressed an internal solution for it, which aims to cache all compiled files and share them between sandboxes with the same dependencies.

Why codesandbox.io loads faster than Sandpack?
We use the exact same bundler in codesandbox as is published with the sandpack package, so actual bundling/transformation speed should be identical. However, on CodeSandbox we have a server-side redis cache which makes initial loads almost instant as it does not need to transpile anything initially. Again, we have some things planned to make this better for all sandpack users (a cache that isn't tied to a sandbox and some other improvements).

Related #292, #271, #259

[christian-schulze]

This is sounding really promising!

In the meantime, I've hacked together a working solution for loading pre-transpiled code here:

• christian-schulze/codesandbox-client@ae8079b
• christian-schulze@b2e77d5
• https://github.com/christian-schulze/sandpack-pre-compiled (example)

Looking forward to making use of the official feature when its ready 🎁

[joshwcomeau]

I'm thrilled to hear you're working on this 💯

In my own usecase, I have a "fullscreen" button that transfers to a new Sandpack in a Portal. Right now, there's a really noticeable transpile step as the component has to start from scratch:

sandpack-no-cache.mp4

If I only have to pay that transpile cost when the page first loads, it would greatly improve the user experience.

Thanks so much for your work on this project!

[PeterDraex]

@danilowoz Could you provide a time frame when the cache feature could be released? Are we talking weeks or months?

[danilowoz]

I think we're on a stable version, and soon (a few weeks or less) we'll be able to introduce a beta version of Sandpack Bundler V2. But I can advance that initially, it will only work for React templates, is that ok for you?

[PeterDraex]

@danilowoz Will TypeScript be supported?

[danilowoz]

Yes, but it depends on what you mean by supporting Typescript:

• Language server/consume compile error: yes, you can check the implementation here TypeScript integration #237
• Compile Typescript files: yes, thought babel compiler;

[PeterDraex]

Is this already available in #375?

[danilowoz]

ok, let's make it official, please read #416

😄

[danilowoz]

@joshwcomeau, I'm curious to know if you gave the new bundler a try. We made some significant improvements and progress toward removing dependencies and transpile overhead. Feel free to direct me on Twitter or discord to discuss more about it.

I'm looking forward to understanding how we can help you.