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.