Preact router code splitting

root.jsx

import { Component, h } from 'preact'
import Router from 'preact-router'
import Nav from './components/nav.jsx'

const asyncComponent = getComponent => class extends Component {
  componentWillMount() {
    if (!this.state.component) {
      getComponent()
        .then(module => module.default)
        .then(this.linkState('component'))
    }
  }

  render(props, { component }) {
    return component ? h(component, props) : null
  }
}

const Home = asyncComponent(() => import('./pages/home.jsx'))
const About = asyncComponent(() => import('./pages/about.jsx'))
const Contact = asyncComponent(() => import('./pages/contact.jsx'))
const NotFound = asyncComponent(() => import('./pages/not-found.jsx'))

export default () => (
  <div>
    <Nav />
    <Router>
      <Home path="/" />
      <About path="/about" />
      <Contact path="/contact" />
      <NotFound default />
    </Router>
  </div>
)