Adding Code Splitting by routes with react-loadable

.babelrc

@@ -10,6 +10,7 @@
     "@babel/stage-0"
   ],
   "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
     "transform-es3-member-expression-literals",
     "transform-es3-property-literals"
   ]

package-lock.json

@@ -15158,6 +15158,14 @@
         "theming": "1.3.0"
       }
     },
+    "react-loadable": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.3.1.tgz",
+      "integrity": "sha1-lpnpoI/tSbrNacqqKCA0tip2vN0=",
+      "requires": {
+        "prop-types": "15.6.1"
+      }
+    },
     "react-popper": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.2.tgz",
@@ -15204,11 +15212,6 @@
         "warning": "3.0.0"
       }
     },
-    "react-router-redux": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/react-router-redux/-/react-router-redux-4.0.8.tgz",
-      "integrity": "sha1-InQDWWtRUeGCN32rg1tdRfD4BU4="
-    },
     "react-scrollbar-size": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.1.0.tgz",

package.json

@@ -23,6 +23,7 @@
   "devDependencies": {
     "@babel/cli": "^7.0.0-beta.40",
     "@babel/core": "^7.0.0-beta.40",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.40",
     "@babel/polyfill": "^7.0.0-beta.40",
     "@babel/preset-env": "^7.0.0-beta.40",
     "@babel/preset-react": "^7.0.0-beta.40",
@@ -63,6 +64,7 @@
     "material-ui": "^1.0.0-beta.35",
     "material-ui-icons": "^1.0.0-beta.35",
     "react-final-form": "^3.1.2",
+    "react-loadable": "^5.3.1",
     "react-router-dom": "^4.2.2"
   },
   "jest": {

src/App.js

@@ -1,13 +1,6 @@
 import React from 'react'
-import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'
-import Welcome from '~/routes/welcome/components/Layout'
-
-const AppRoutes = () => (
-  <Switch>
-    <Redirect exact from="/" to="/welcome" />
-    <Route exact path='/welcome' component ={Welcome} />
-  </Switch>  
-)
+import { BrowserRouter } from 'react-router-dom'
+import AppRoutes from './routes'
 
 const ReactRouterApp = () => (
   <BrowserRouter>

src/routes/index.js

@@ -0,0 +1,23 @@
+import { CircularProgress } from 'material-ui/Progress';
+import React from 'react'
+import Loadable from 'react-loadable';
+import { Switch, Redirect, Route } from 'react-router-dom'
+import Welcome from './welcome/components/Layout'
+
+const Loading = () => <CircularProgress size={50} />
+
+const Transactions = Loadable({
+  loader: () => import('./transactions/components/Layout'),
+  loading: Loading,
+})
+
+const Routes = () => (
+  <Switch>
+    <Redirect exact from="/" to="/welcome" />
+    <Route exact path='/welcome' component={Welcome} />
+    <Route exact path='/transactions' component={Transactions} />
+  </Switch>  
+)
+
+export default Routes
+

src/routes/transactions/components/Layout.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+class Layout extends React.Component {
+  render() {
+    return (
+      <div>I am transactions Layout</div>
+    )
+  }
+}
+
+export default Layout

src/routes/welcome/components/Layout.jsx

@@ -1,6 +1,7 @@
 import Button from 'material-ui/Button';
 import React, { Component } from 'react'
 import { Form, Field } from 'react-final-form'
+import { Link } from 'react-router-dom'
 import contract from 'truffle-contract'
 import TextField from '~/components/forms/TextField'
 import Page from '~/components/layout/Page'
@@ -104,6 +105,11 @@ class App extends Component {
               </form>
             )}
           />
+          <Link to="/transactions">
+            <Button variant="raised" color="primary">
+              Go to transactions
+            </Button>
+          </Link>
           </PageFrame>
       </Page>
     );