Lazy loading Builder components

Technical Questions
1

Builder components can be lazy loaded such that they can be used in any Builder.io but only downloaded to a browser when used (via code splitting).

To accomplish this, we need to separate our components and configuration into two separate files.

You can see an example of this using NextJS here

components/my-component.ts

import LargeLibraryComponent from 'large-library'
export function MyComponent() { return <LargeLibraryComponent /> }

pages/_app.ts

import { Builder } from '@builder.io/react';
import dynamic from 'next/dynamic';

// This code will only be fetched when this component is used on a page
const LazyMyComponent = dynamic(() =>
  import('../components/my-component.ts').then(
    (mod) => mod.AccordionComponent,
  ),
);

Builder.registerComponent(
  LazyMyComponent,
  { name: 'MyComponent '},
);

In this example we use Next.js, but you can also use this same methodology with Loadable or Suspense as well.

You can also accomplish lazy loading for our @builder.io/widgets package as seen in this example as well. See more info here