Experimental bundler (beta)

[danilowoz]

Sandpack bundler v2 [very beta]

The Sandpack bundler v2 aims to eventually replace the current sandpack with a more streamlined and faster version. Plus, it allows us to implement even more improvements in the future, thanks to a fresh codebase that allowed us to remove many of the bottlenecks from the previous bundler.

The new bundler:

• Skips transpiling step for dependencies by caching them in our custom-built CDN;
• Fetches dependencies from our very own CDN, no longer third-party involved;
• Uses less resource (avoid fetching unnecessary files) and lot quicker;

Same benefits from the previous bundler

Security

The bundler evaluates and transpiles all files in an iframe under a different subdomain. This is important because it prevents attackers from tampering with cookies of the host domain when evaluating code.

Scoped styles/javascript execution

There’s no risk of any executed code affecting the main page, which avoids unexpected styles or unhandled errors.

Performance

We heavily make use of Web Workers for transpilations, and only for those sandboxes that are in the viewport and the user is interacting with, meaning that we only use resources as needed.

Bundle Size

Another reason to host the bundler externally is because of code splitting: we split all our transpilers away and load them on-demand.

React DevTools

Sandpack bundler supports running react-devtools-inline in isolated mode, as an external dependency, which means you can run more than one instance per page and lazily load it.

Others

• npm dependency support;
• Hot module reloading;
• Error overlaying;
• Caching;

Benchmarking

	v1	v2
Memory usage (iframe thread)	~20MB	~ 5MB
Memory usage (babel) [1]	6.8 - 10.2MB	6.6 - 6.6MB
Network (compressed) [2]	2.8MB	863kb
Time to load (first time) [3]	9293ms	4149ms
Time to load (second time) [4]	565ms	566ms
Time to load [5]	854ms	214ms

[1] idle - peek
[2] Exclude local resource & external, except sandpack & disabled cache;
[3] Incognito window (fresh cache) & Fast 3G
[4] Cache enabled & Fast 3G
[5] Incognito window (fresh cache) & no throttling

Known issues / what’s next

• Implement react-devtools-inline protocol;
• React template-only;
• It doesn't watch package.json changes;

How to test it & how to use it

How to test
https://codesandbox.io/s/new-bundler-0xee8i

How to use

<SandpackProvider
  template="react"
  bundlerURL="https://sandpack-bundler.pages.dev"
 >

<Sandpack
  template="react"
  options={{ bundlerURL: "https://sandpack-bundler.pages.dev" }}
/>

---

Hope it addresses most of the problems we've seen on #295. We're looking forward to hearing any feedback about this new version, so please feel free to leave any questions here or create an issue for bug reporting in this repository.

[nicksrandall]

@danilowoz Do you have any updates on this? This this experimental bundler still being explored? Is there a place to provide feedback on the current implementation?

[andreifloricel]

Hi @danilowoz , what's the current status on the new bundler? (I see it's being worked on)
Do you have a rough estimate for when it will be stable?
Also, you mentioned that initially it will be limited to react template only.
Is the limitation still valid? If yes, will it be able to handle a custom setup for react-typescript?

[danilowoz]

We're not actively working on the new bundler, but still polishing and validating some new ideas, which might overlap bundlers (old and new) scopes. So, the beta bundler still contains the same limitation described at the top of this thread.

React template should support vanilla and TypeScript files, so you should be able to use them. Are you particularly interested in any new features besides React-TS?

[andreifloricel]

Oh, I thought caching would be limited to the react-ts template, but apparently I misunderstood you and it will be limited to sandpack-react (with any of the supported template setups, including custom setup). All the better :)

I am currently interested in improving performance as much as possible, as it is heavily impacted if the project is a bit larger. And the bottleneck is the transpilation phase.

[carlbrn]

Are you particularly interested in any new features besides React-TS?

Ability to load the transpiled code is nice.

[akserg]

Hi @danilowoz
I'm using the Sandpack in my current development and need the react-devtools. I tried the experimental bundler in the Codesandbox link (https://codesandbox.io/s/new-bundler-0xee8i), but the devtools was not appear as it should. It doesn't work in the story in the storybook as well.

Do you have any ideas of why it's broken and how to fix it?

[danilowoz]

Currently, the experimental bundler doesn't integrate the react-devtools. To make it work, we need to inject the backend of the react-devtool inside of the bundler iframe and back/forth message between the bundler and Sandpack, which would implement the frontend part.

If you do want to see this on Sandpack, you can open a new issue on https://github.com/codesandbox/sandpack-bundler, or you can try to implement it there, I think we can guide you.

[akserg]

Hi @danilowoz
Thank you for your reply. I managed to use the normal bundler with react-devtools in Sandpack.

[monsonjeremy]

One thing I have noticed in trying this and wanted to flag in case you weren't aware. It doesn't seem to load Tailwind (using externalResources) on every compile, seems to load it about half the time.

[mighdoll]

I found a bundling error with the dependency: @petamoriken/float16.

In its package.json there are two exports: one for "." and one for "./inspect". The "./inspect" entry is not intended for browser use, it's for use on node/deno not in the browser. But the bundler nonetheless tries to load the /inspect entry and then fails due to a missing node dependency ("util"). I can work around the problem by patching in util or patching the upstream library, but that's not necessary with other bundlers.

I would think the bundler ought not be trying to process exports that are not imported. wdyt?