Lazy routing
Earlier in the chapter, you learned how to split your route declarations by feature. This is done to avoid having a monolithic routes module, which can not only be difficult to decipher, but could also cause performance issues. Think about a large application that has dozens of features and hundreds of routes. Having to load all of these routes and components upfront would translate to a bad user experience.
In this final section of the chapter, we'll look at loading routes lazily. Part of this involves leveraging a loader such as Webpack, the loader used in this example. First, let's take a look at the main App component:
import React, { PropTypes } from 'react';
import { Link } from 'react-router';
// The "App" component is divided into
// "header" and "content" sections, and will
// simply render these properties.
const App = ({ header, content }) => (
<section>
<header>
{header}
<...
