Makeswift Home
Makeswift on GitHub

Code-Splitting

If you're having issues with next/dynamic components in the builder, check our troubleshooting guide.

AnchorUsing next/dynamic

Often times you'll have a lot of components being registered with Makeswift but not all of them are used on every page. To avoid a large bundle size you can load a component only when it's used by leveraging Next.js' next/dynamic.

import dynamic from 'next/dynamic'
import { ReactRuntime } from '@makeswift/runtime/react'

const DynamicHeader = dynamic(() => import('../components/header'), {
  suspense: true,
})

ReactRuntime.registerComponent(DynamicHeader, {
  type: 'header',
  label: 'Header',
  props: {
    /* Header props... */
  },
})

Registering DynamicHeader means that all the JavaScript in ../components/header will not be included in a page unless the component is actually used.