Lazy loading React components with Webpack 2 and System.import

createComponentProxy.js

import React, { Component, createElement } from 'react'

const Loader = () => (
  <h1>Loading…</h1>
)

const createComponentProxy = (relativePath, { placeholder = null }) => {
  let ProxiedComponent

  const loadComponent = callback => {
    if (!ProxiedComponent) {
      // This needs to be relative to the current module otherwise Webpack won't know where to look
      System.import(`./${relativePath}`).then(module => callback(ProxiedComponent = module))
    }

    return ProxiedComponent
  }

  class ComponentProxy extends Component {
    constructor(props) {
      super(props)

      this.state = { component: ProxiedComponent }
    }

    componentDidMount() {
      if (!this.state.component) {
        loadComponent(component => this.setState({ component }))
      }
    }

    render() {
      const { component } = this.state

      if (!component) {
        return placeholder
      }

      return createElement(component, this.props)
    }
  }

  return ComponentProxy
}

export default createComponentProxy('MyComponent', { placeholder: <Loader /> })

MyComponent.js

import React from 'react'

export default () => (
  <div>
    My Component
  </div>
)

Found a snippet a bit better: https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194