Example on approach for bundle split routes

split.js

// FILE: routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';

import Split from './screens/split';
import App from './screens';
import Start from './screens/start';

// "Split" is a part of the main bundle, but it renders a component from a separately loaded bundle on demand
export default () => (
  <Route component={App}>
    <IndexRoute component={Start} />
    <Route path="/split" component={Split} />
  </Route>
);

// FILE: screens/split.js
import React, { Component } from 'react';
import { provideHooks } from 'redial';

@provideHooks({
  defer: () => {
    // you can do some things here like normal
  },
})
class Split extends Component {
  constructor() {
    super();

    this.state = {
      bundle: () => <div>Loading bundle...</div>, // show something when bundle is not yet loaded
    };
  }

  componentDidMount() {
    require.ensure(['./bundle'], (require) => {
      const bundle = require('./bundle').default;
      this.setState({ bundle });
    }, 'bundle');
  }

  render() {
    const bundle = <this.state.bundle />;

    return (
      <div>
        { bundle }
      </div>
    );
  }
}

export default Split;

// FILE: bundle.js
export default () => <div>I am not a part of the main bundle! And I can do some pretty heavy things!</div>;