feat(*) lazy loading of of route /lazy

* split in chunks
* had to add a routerStateSelector to the reduxReactRouter store enhancer (to avoid propTypes warnings from redux router)
* there's is still a bug remaining, see #12

Author: topheman

src/containers/Lazy/Lazy.js

@@ -4,7 +4,7 @@ const Lazy = ({ children }) => {
   return (
     <div>
       <h2>
-        This part will be lazy-loaded
+        This part is lazy-loaded
       </h2>
       <div>
         {children}

src/containers/LazyHome/LazyHome.js

@@ -3,7 +3,9 @@ import React from 'react';
 const LazyHome = () => {
   return (
     <div>
-      Welcome to this part ...
+      <p>Welcome to component lazy-loading, thanks to <a href="https://github.com/rackt/react-router" title="react-router on github">react-router</a> & <a href="https://webpack.github.io/docs/code-splitting.html">webpack.ensure</a> !</p>
+      <p>Take a look in your devtools, you'll see some chunks required.</p>
+      <p>There's a bug remaining on this part (an egde case), please consider contribute to <a href="https://github.com/topheman/react-es6-redux/issues/12">this issue</a> if you've appreciated this project.</p>
     </div>
   );
 };

src/redux/configure-store.js

@@ -20,7 +20,18 @@ let combinedCreateStore;
  * Higher order function that compose a store creator and returns a new one: (StoreCreator) => (StoreCreator)
  */
 const storeEnhancers = [
-  reduxReactRouter({ createHistory })
+  reduxReactRouter({
+    createHistory,
+    routerStateSelector: state => ({
+      location: {
+        pathname: undefined
+      },
+      routes: [],
+      params: {},
+      components: [],
+      ...state.router
+    })
+  })
 ];
 
 /**

src/routes.js

@@ -8,17 +8,26 @@ import {
   Redux
 } from './containers/index';
 
-import Lazy from './containers/Lazy/Lazy';
-import LazyHome from './containers/LazyHome/LazyHome';
+const lazyRouteLoader = (location, cb) => {
+  require.ensure([], (require) => {
+    cb(null, require('./containers/Lazy/Lazy'));
+  });
+};
+
+const lazyHomeRouteLoader = (location, cb) => {
+  require.ensure([], (require) => {
+    cb(null, require('./containers/LazyHome/LazyHome'));
+  });
+};
 
 export default (
   <Route path="/" component={App}>
     <IndexRoute component={Home}/>
     <Route path="github" component={Github}/>
     <Route path="github/user/:username" component={GithubUser}/>
     <Route path="redux" component={Redux}/>
-    <Route path="lazy" component={Lazy}>
-      <IndexRoute component={LazyHome}/>
+    <Route path="lazy" getComponent={lazyRouteLoader}>
+      <IndexRoute getComponent={lazyHomeRouteLoader}/>
     </Route>
   </Route>
 );

webpack.config.js

@@ -135,8 +135,9 @@ var config = {
     "css/main": "./src/style/main.scss"
   },
   output: {
-    publicPath: "/assets/",
+    publicPath: "assets/",
     filename: "[name]" + hash + ".js",
+    chunkFilename: 'js/[id]'  + hash + '.chunk.js',
     path: "./build/assets"
   },
   cache: true,