Code spliting react router 4 with import() and webpack 2.4

app.jsx

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import async from './components/async'

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/" component={async(import('./pages/home')) } />
          <Route path="/about" component={async(import('./pages/about')) } />
          <Link to="/about">To: about</Link>
        </div>
      </Router>
    )
  }
}

export default App

components_async.jsx

import React, { Component } from 'react'

const async = method => class Importer extends Component {
  constructor() {
    super()

    this.state = { composedComponent: null }
  }

  componentDidMount() {
    const composedComponent = method.then(module => {
      this.setState({
        composedComponent: module.default,
      })
    })
  }

  render() {
    const { composedComponent } = this.state
    if (!composedComponent) {
      return <h6>Loading...</h6>
    }

    return composedComponent()
  }
}

export default async

package.json

{
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.4.0",
    "babel-runtime": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4"
  },
  "scripts": {
    "dev": "webpack-dev-server --hot"
  }
}

pages_about.jsx

import React from 'react'

const AboutPage = () => <h2>About Page</h2>

export default AboutPage

pages_home.jsx

import React from 'react'

const HomePage = () => <h1>The home page</h1>

export default HomePage

What a great way to set up a quick website! Does your async(import()) cache the results so it's not making the same request all the time?

looks like an smart approach!, do we miss the classNames when debugging w/ React extensions?

@joshhoegen cache will be handled by your browser, manifest or your serviceWorker, but the load time is really improved due is only requesting a very small chunk the first time, https://github.com/tc39/proposal-dynamic-import maybe this can help or the previous knowledge from System.import() should be very similar.

@jaanauati indeed you will miss the className but you have the function name under composedComponent on your extension, and if you click the Importer and type $r on your console you will find the name as well under state.