Preload dependencies during idle time? about react-async-component HOT 3 OPEN

export default [
  {
    id: 'Home',
    exactly: true,
    props: {
      title: 'Home'
    },
    pattern: '/',
    component: () => import('./screens/Home')
  },
  {
    id: 'Welcome',
    props: {
      title: 'Welcome'
    },
    pattern: '/login/1',
    component: () => import('./screens/Welcome')
  },
  {
    id: 'SecurityCenter',
    props: {
      title: 'Security Center'
    },
    pattern: '/security-center',
    secure: true,
    component: () => import('./screens/SecurityCenter')
  },
  {
    id: 'UserProjects',
    props: {
      title: 'Project Select'
    },
    pattern: '/project',
    component: () => import('./screens/UserProjects')
  },
  {
    id: 'LoginPage',
    props: {
      title: 'Login'
    },
    pattern: '/login',
    component: () => import('./screens/Login')
  }
]

import React from 'react'
import Resolver from 'app/resolver'

const routes = [
  {
    id: 'ProjectSelect',
    pattern: '/',
    exactly: true,
    component: () => import('./screens/ProjectSelect')
  },
  {
    id: 'ProjectDashboard',
    pattern: '/dashboard/:projectSlug',
    component: () => import('./screens/ProjectDashboard')
  }
]

export default props => (<Resolver {...props} routes={routes} />)

const RoutedResolver = ({ routes, ...props }) => (
  <div>
    {
      routes.map( route => {
        if ( ! route.id ) { throw new Error('Route Does not have an ID: ', route) }
        const matchProps = {
          ...route,
          key: route.id,
          exactly: route.exactly == true,
          pattern: route.pattern === '/'
            ? props.pathname
            : props.pathname + route.pattern
        }
        return <Match {...matchProps} render={ renderProps => {
            const appProps = {
              ...matchProps,
              ...renderProps,
            }
            return <Resolver {...props} {...appProps} />
          }} 
        />
      })
    }
  </div>
)

const Loading = () => (<div>LOADING</div>)

const Resolver = ({ 
  component, routes, 
  isAuthenticated = false,
  defer  = false, 
  secure = false,
  ...props 
}, { store }) => {
  if ( secure && ! isAuthenticated ) {
    const { location, ...rest } = props
    store.dispatch({
      type: 'ROUTER_SECURE_REQUESTED',
      location: props.location,
      props:    rest
    })
    return null
  }
  const Component = routes
    ? RoutedResolver
    : component
      ? BuildAsyncComponent(component, secure || defer)
      : Loading
  if ( routes ) { props.routes = routes }
  //console.log('Resolver: ', props.id, props)
  return <Component {...props} />
}

Resolver.contextTypes = {
  store: PropTypes.object.isRequired
}

export const BuildAsyncComponent = (component, defer) => 
  createAsyncComponent({
    resolve: component,
    defer
  })

export default Resolver