loadable

• components are imported dynamically webpack's syntax for code splitting

high level flow is:

• we wrap each import('path') in a loadable function (because as soon as import() is called, the file starts loading)
• the result of an import('path') is a promise
• we pass each loadable into a () => class LoadableComponent
• the LoadableComponent will be included in the main chunk, but only starts loading the loadable function during componentWillMount
• a high level example for this flow is as follows:

const loadable = (loadComponent) => class extends React.PureComponent {
  state = { Component: undefined }
  async componentWillMount() {
    this.setState({ Component: await loadComponent() })
  }
  render() {
    return <scoped.Component {...this.props} />
  }
}

export const Eh = loadable(() =>
  import(/* webpackChunkName: "Eh.page" */ '../../views/pages/Eh')
)