title: How to render components dynamically in Gatsby.js and use code-splitting?
body: <p>I am building websites with Gatsby and Contentful and it has been great so far. My problem is, that I don't know how to dynamically render components based on the data in Contentful.</p>
  <p>Let's say there is a page content type which as a title, url and field for components. Those components could be a YouTube player, or markdown text or photos. Currently I'm using a custom component that imports all available components and then renders the components of the page using  switch.</p>
  <pre><code>switch (contentType) {
    case 'billboard':
      return &lt;Billboard key={key} id={key} {...section.fields}/&gt;;
    case 'photos':
      return &lt;Photos key={key} id={key} {...section.fields}/&gt;;
    case 'postGrid':
      return &lt;PostGrid key={key} id={key} {...section.fields}/&gt;;
    case 'splitView':
      return &lt;SplitView key={key} id={key} {...section.fields}/&gt;;
    case 'text':
      return &lt;Text key={key} id={key} {...section.fields}/&gt;;
    case 'tile':
      return &lt;Tile key={key} id={key} {...section.fields}/&gt;;
    default:
      return null;
  }
  </code></pre>
  <p>The problem with this is that Gatsby will include all available components in the webpack chunk which leads to a blown up site if there are many of them. Let's say there is a page with text only (e.g. imprint) the YouTube player and photos component would be loaded too - just not used.</p>
  <p>So... is there a way to render components based on data which then results in proper code-splitting?</p>
  <p>Thank you so much!</p>