Workaround for Reducing Bundle Size, Using Dynamic Imports?

[JoemarDev]

Hi @prevwong! First off, thank you for the amazing work on Craft.js. I’ve been trying to handle the issue of multiple (potentially large) component bundles in a page builder scenario, referencing this discussion #168

Currently, I’m using a dynamic import approach where I only install new components in the Editor resolver when I actually need them. Here’s the simplified code:

const handleInstall = async () => {
  const [elementBoxModule, elementsModule] = await Promise.all([
    import("../builder-blocks/ElementBox"),
    import("../builder-blocks/Elements"),
  ]);

  setOptions((options) => {
    options.resolver = {
      ...options.resolver,
      ...elementBoxModule.default,
      ...elementsModule.default,
    };
  });
};

In other words, I keep track of which components the user has actually used and only load those modules on demand. This way, I avoid bundling all components upfront.

Question:

• Is this approach recommended with Craft.js?
• Are there potential pitfalls, especially if some components aren’t installed before an undo/redo action tries to render them?
• Any best practices for dynamically updating the resolver to keep the Editor stable?

Thanks in advance for any insights or suggestions!