Dynamic Blocks

A "dynamic" block is a block that loads asynchronously, only when it's used for the first time. This is useful when a block has a large dependency (think, THREE.js or Swiper). This can drastically reduce the size of your bundle, while also improving the loading time of your site.

The downside is that the block won't load until it's first use, which means that it'll be hidden for a moment while it loads. Because of this, it's recommended that you:

• Perhaps don't use this feature if your block is likely to be used above-the-fold (maybe a good candidate for dynamic components or dynamic imports)
• Do a fade in animation when the block is first mounted, so that it's not a jarring experience.

It's super easy to enable this feature — just add Dynamic: true to your block header comment.

/**
 * Title: TITLE
 * Description: DESCRIPTION
 * ...etc
 * Dynamic: true
 */

You can read more about dynamic components, and other ways to reduce your bundle size here — Bundle Size Tips →