Rough minimal bootstrap for React w/ code splitting

index.js

const ReactDom = require('react-dom');
const { Router } = require('react-router');
const { createHistory } = require('history'),
  history = createHistory();

const mount = window.document.getElementById('app');
if (!mount){
  mount = window.document.createElement("div");
  mount.id = "app";
  window.document.body.appendChild('mount');
}

// HTML 5 routing is supposed in webpack and the basic express server
require.ensure([],
  // lazy require allows webpack to HMR the app
  require => {
    let routes = require('routes');
    ReactDom.render(
      <Router history={history}>
        {routes}
      </Router>, mount);
  }
);

routes.js

const React = require('react');
const { Router, Route } = require('react-router');
const App = React.createClass({
  render(){
    let {children} = this.props
    return (
      <div className='app'>
        {children && children.length > 0 ? 
            'insert tombstone here' : 
            children}
      </div>
    );
  }
});


// routes
var routes = {
  path: '/',
  component: App,
  childRoutes:[
    {
      path:"/one",
      getComponents:(a, cb) => 
        require.ensure([], require => {
          cb(null, require("pages/PageOne"));
        })
    },
    {
      path:"/two",
      getComponents:(a, cb) => 
        require.ensure([], require => {
          cb(null, require("pages/PageTwo"));
        })
    },
  ]
};

module.exports = routes;

At the moment my index.js looks like this:

import React from 'react'
import ReactDOM from 'react-dom'
import getRoutes from './config/routes'
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import ReduxThunk from 'redux-thunk'
import * as reducers from 'redux/modules'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from 'react-tap-event-plugin'
import { routerReducer, syncHistoryWithStore, routerMiddleware, replace } from 'react-router-redux'
import { browserHistory } from 'react-router'

const historyMiddleware = routerMiddleware(browserHistory)

let reducer = combineReducers({...reducers, routing: routerReducer})
const store = createStore(
  reducer,
  compose(applyMiddleware(ReduxThunk, historyMiddleware),
   window.devToolsExtension ? window.devToolsExtension() : f => f))

const history = syncHistoryWithStore(browserHistory, store)

export function checkAuth () {
  console.log('Route onEnter CheckAuth function Ran')
  if (store.getState().users.isFetching === true) {
    return
  }
  const isAuthed = store.getState().users.isAuthed
  if (isAuthed === true) {
    if (store.getState().routing.locationBeforeTransitions.pathname === '/') {
      store.dispatch(replace('feed'))
      console.log('CheckAuth function changed the path to feed')
    } else {
      console.log('CheckAuth function ran & User is Authed but path is not /')
      return
    }
  } else {
    if (store.getState().routing.locationBeforeTransitions.pathname !== '/') {
      store.dispatch(replace('/'))
      console.log('CheckAuth function changed the path to /')
    }
  }
}

export function errorAuth () {
  if (store.getState().users.isFetching === true) {
    return
  }
  const isAuthed = store.getState().users.isAuthed

  if (isAuthed === true) {
    replace('/feed')
  } else {
    replace('/')
  }
}


const App = () => (
    <MuiThemeProvider>
      <Provider store = {store}>
        {getRoutes(checkAuth, history, errorAuth)}
      </Provider>
    </MuiThemeProvider>
    )

ReactDOM.render(
    <App/>,
  document.getElementById('app')
)

And my routes like this:

import React from 'react'
import { Router, Route, IndexRoute } from 'react-router'
import { MainContainer, HomeContainer, FeedContainer } from 'containers'
import {Error404} from 'components'

export default function getRoutes (checkAuth, history, errorAuth) {
  return (
      <Router history={history}>
        <Route path='/' component={MainContainer}>
          <IndexRoute component = {HomeContainer} onEnter = {checkAuth}/>
          <Route path='feed' component = {FeedContainer} onEnter = {checkAuth}/>
          <Route path='*' component = {Error404} />
        </Route>
      </Router>
  )
}

Do i have to remove all these import statements out of both of these files and change them to require? And can the require.ensure be used in my Declarative way of getRoutes

@jasan-s

import * as reducers from 'redux/modules' /* <-- this is probably pulling in a lot more imports */
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' /* <-- this could be getting some or all of material-ui, definitely remove it */

import { MainContainer, HomeContainer, FeedContainer } from 'containers' /* <-- these should all be require.ensure, inside the getComponents of the route */
import {Error404} from 'components'  /* <-- this should be require.ensure, inside the getComponents of the route */

Unless you really have to have redux manage your routes I would remove all that setup. It's forcing a ton of libraries to need to be loaded. That should get an app shell up much quicker.

After you have a fast shell coming up you can add things one at a time to see what the impact is on load times.