use react-loadable

client/package-lock.json

@@ -4411,13 +4411,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4430,18 +4428,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4544,8 +4539,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4555,7 +4549,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4568,20 +4561,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4598,7 +4588,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4671,8 +4660,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4682,7 +4670,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4788,7 +4775,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9802,6 +9788,14 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-loadable": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz",
+      "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==",
+      "requires": {
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-redux": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",

client/package.json

@@ -10,6 +10,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
+    "react-loadable": "^5.5.0",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^4.0.8",

client/src/components/App.js

@@ -2,13 +2,25 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import Loadable from 'react-loadable';
 
 import './Container.css';
 import './App.css';
 
-import TodosView from './todolist/TodosView';
-import LoginForm from './user/LoginForm';
-import SignupForm from './user/SignupForm';
+const LoadableTodosView = Loadable({
+  loader: () => import('./todolist/TodosView'),
+  loading: () => <span>'loading'</span>,
+});
+
+const LoadableLoginForm = Loadable({
+  loader: () => import('./user/LoginForm'),
+  loading: () => <span>'loading'</span>,
+});
+
+const LoadableSignupForm = Loadable({
+  loader: () => import('./user/SignupForm'),
+  loading: () => <span>'loading'</span>,
+});
 
 export default class App extends React.PureComponent {
   componentDidMount() {
@@ -22,9 +34,9 @@ export default class App extends React.PureComponent {
         <CssBaseline />
         <Router>
           <div id="container">
-            <Route exact path="/" component={TodosView} />
-            <Route path="/login" component={LoginForm} />
-            <Route path="/signup" component={SignupForm} />
+            <Route exact path="/" component={LoadableTodosView} />
+            <Route path="/login" component={LoadableLoginForm} />
+            <Route path="/signup" component={LoadableSignupForm} />
           </div>
         </Router>
       </React.Fragment>