refactor(DefaultLayout) code splitting with React.lazy

- remove `react-loadable`
- `Suspense` with routes, Aside, Footer, Header
-  add `onLogout` for DefaultHeader

src/containers/DefaultLayout/DefaultHeader.js

@@ -65,7 +65,7 @@ class DefaultHeader extends Component {
               <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
               <DropdownItem divider />
               <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
-              <DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
+              <DropdownItem onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem>
             </DropdownMenu>
           </AppHeaderDropdown>
         </Nav>

src/containers/DefaultLayout/DefaultLayout.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { Container } from 'reactstrap';
 
@@ -18,46 +18,70 @@ import {
 import navigation from '../../_nav';
 // routes config
 import routes from '../../routes';
-import DefaultAside from './DefaultAside';
+
-import DefaultFooter from './DefaultFooter';
+const DefaultAside = React.lazy(() => import('./DefaultAside'));
-import DefaultHeader from './DefaultHeader';
+const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
+const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
 
 class DefaultLayout extends Component {
+
+  loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
+
+  signOut(e) {
+    e.preventDefault()
+    this.props.history.push('/login')
+  }
+
   render() {
     return (
       <div className="app">
         <AppHeader fixed>
-          <DefaultHeader />
+          <Suspense  fallback={this.loading()}>
+            <DefaultHeader onLogout={e=>this.signOut(e)}/>
+          </Suspense>
         </AppHeader>
         <div className="app-body">
           <AppSidebar fixed display="lg">
             <AppSidebarHeader />
             <AppSidebarForm />
+            <Suspense>
             <AppSidebarNav navConfig={navigation} {...this.props} />
+            </Suspense>
             <AppSidebarFooter />
             <AppSidebarMinimizer />
           </AppSidebar>
           <main className="main">
             <AppBreadcrumb appRoutes={routes}/>
             <Container fluid>
-              <Switch>
+              <Suspense fallback={this.loading()}>
-                {routes.map((route, idx) => {
+                <Switch>
-                    return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
+                  {routes.map((route, idx) => {
-                        <route.component {...props} />
+                    return route.component ? (
-                      )} />)
+                      <Route
-                      : (null);
+                        key={idx}
-                  },
+                        path={route.path}
-                )}
+                        exact={route.exact}
-                <Redirect from="/" to="/dashboard" />
+                        name={route.name}
-              </Switch>
+                        render={props => (
+                          <route.component {...props} />
+                        )} />
+                    ) : (null);
+                  })}
+                  <Redirect from="/" to="/dashboard" />
+                </Switch>
+              </Suspense>
             </Container>
           </main>
           <AppAside fixed>
-            <DefaultAside />
+            <Suspense fallback={this.loading()}>
+              <DefaultAside />
+            </Suspense>
           </AppAside>
         </div>
         <AppFooter>
-          <DefaultFooter />
+          <Suspense fallback={this.loading()}>
+            <DefaultFooter />
+          </Suspense>
         </AppFooter>
       </div>
     );

src/routes.js

@@ -1,188 +1,41 @@
 import React from 'react';
-import Loadable from 'react-loadable'
-
 import DefaultLayout from './containers/DefaultLayout';
 
-function Loading() {
+const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));
-  return <div>Loading...</div>;
+const Cards = React.lazy(() => import('./views/Base/Cards'));
-}
+const Carousels = React.lazy(() => import('./views/Base/Carousels'));
-
+const Collapses = React.lazy(() => import('./views/Base/Collapses'));
-const Breadcrumbs = Loadable({
+const Dropdowns = React.lazy(() => import('./views/Base/Dropdowns'));
-  loader: () => import('./views/Base/Breadcrumbs'),
+const Forms = React.lazy(() => import('./views/Base/Forms'));
-  loading: Loading,
+const Jumbotrons = React.lazy(() => import('./views/Base/Jumbotrons'));
-});
+const ListGroups = React.lazy(() => import('./views/Base/ListGroups'));
-
+const Navbars = React.lazy(() => import('./views/Base/Navbars'));
-const Cards = Loadable({
+const Navs = React.lazy(() => import('./views/Base/Navs'));
-  loader: () => import('./views/Base/Cards'),
+const Paginations = React.lazy(() => import('./views/Base/Paginations'));
-  loading: Loading,
+const Popovers = React.lazy(() => import('./views/Base/Popovers'));
-});
+const ProgressBar = React.lazy(() => import('./views/Base/ProgressBar'));
-
+const Switches = React.lazy(() => import('./views/Base/Switches'));
-const Carousels = Loadable({
+const Tables = React.lazy(() => import('./views/Base/Tables'));
-  loader: () => import('./views/Base/Carousels'),
+const Tabs = React.lazy(() => import('./views/Base/Tabs'));
-  loading: Loading,
+const Tooltips = React.lazy(() => import('./views/Base/Tooltips'));
-});
+const BrandButtons = React.lazy(() => import('./views/Buttons/BrandButtons'));
-
+const ButtonDropdowns = React.lazy(() => import('./views/Buttons/ButtonDropdowns'));
-const Collapses = Loadable({
+const ButtonGroups = React.lazy(() => import('./views/Buttons/ButtonGroups'));
-  loader: () => import('./views/Base/Collapses'),
+const Buttons = React.lazy(() => import('./views/Buttons/Buttons'));
-  loading: Loading,
+const Charts = React.lazy(() => import('./views/Charts'));
-});
+const Dashboard = React.lazy(() => import('./views/Dashboard'));
-
+const CoreUIIcons = React.lazy(() => import('./views/Icons/CoreUIIcons'));
-const Dropdowns = Loadable({
+const Flags = React.lazy(() => import('./views/Icons/Flags'));
-  loader: () => import('./views/Base/Dropdowns'),
+const FontAwesome = React.lazy(() => import('./views/Icons/FontAwesome'));
-  loading: Loading,
+const SimpleLineIcons = React.lazy(() => import('./views/Icons/SimpleLineIcons'));
-});
+const Alerts = React.lazy(() => import('./views/Notifications/Alerts'));
-
+const Badges = React.lazy(() => import('./views/Notifications/Badges'));
-const Forms = Loadable({
+const Modals = React.lazy(() => import('./views/Notifications/Modals'));
-  loader: () => import('./views/Base/Forms'),
+const Colors = React.lazy(() => import('./views/Theme/Colors'));
-  loading: Loading,
+const Typography = React.lazy(() => import('./views/Theme/Typography'));
-});
+const Widgets = React.lazy(() => import('./views/Widgets/Widgets'));
-
+const Users = React.lazy(() => import('./views/Users/Users'));
-const Jumbotrons = Loadable({
+const User = React.lazy(() => import('./views/Users/User'));
-  loader: () => import('./views/Base/Jumbotrons'),
-  loading: Loading,
-});
-
-const ListGroups = Loadable({
-  loader: () => import('./views/Base/ListGroups'),
-  loading: Loading,
-});
-
-const Navbars = Loadable({
-  loader: () => import('./views/Base/Navbars'),
-  loading: Loading,
-});
-
-const Navs = Loadable({
-  loader: () => import('./views/Base/Navs'),
-  loading: Loading,
-});
-
-const Paginations = Loadable({
-  loader: () => import('./views/Base/Paginations'),
-  loading: Loading,
-});
-
-const Popovers = Loadable({
-  loader: () => import('./views/Base/Popovers'),
-  loading: Loading,
-});
-
-const ProgressBar = Loadable({
-  loader: () => import('./views/Base/ProgressBar'),
-  loading: Loading,
-});
-
-const Switches = Loadable({
-  loader: () => import('./views/Base/Switches'),
-  loading: Loading,
-});
-
-const Tables = Loadable({
-  loader: () => import('./views/Base/Tables'),
-  loading: Loading,
-});
-
-const Tabs = Loadable({
-  loader: () => import('./views/Base/Tabs'),
-  loading: Loading,
-});
-
-const Tooltips = Loadable({
-  loader: () => import('./views/Base/Tooltips'),
-  loading: Loading,
-});
-
-const BrandButtons = Loadable({
-  loader: () => import('./views/Buttons/BrandButtons'),
-  loading: Loading,
-});
-
-const ButtonDropdowns = Loadable({
-  loader: () => import('./views/Buttons/ButtonDropdowns'),
-  loading: Loading,
-});
-
-const ButtonGroups = Loadable({
-  loader: () => import('./views/Buttons/ButtonGroups'),
-  loading: Loading,
-});
-
-const Buttons = Loadable({
-  loader: () => import('./views/Buttons/Buttons'),
-  loading: Loading,
-});
-
-const Charts = Loadable({
-  loader: () => import('./views/Charts'),
-  loading: Loading,
-});
-
-const Dashboard = Loadable({
-  loader: () => import('./views/Dashboard'),
-  loading: Loading,
-});
-
-const CoreUIIcons = Loadable({
-  loader: () => import('./views/Icons/CoreUIIcons'),
-  loading: Loading,
-});
-
-const Flags = Loadable({
-  loader: () => import('./views/Icons/Flags'),
-  loading: Loading,
-});
-
-const FontAwesome = Loadable({
-  loader: () => import('./views/Icons/FontAwesome'),
-  loading: Loading,
-});
-
-const SimpleLineIcons = Loadable({
-  loader: () => import('./views/Icons/SimpleLineIcons'),
-  loading: Loading,
-});
-
-const Alerts = Loadable({
-  loader: () => import('./views/Notifications/Alerts'),
-  loading: Loading,
-});
-
-const Badges = Loadable({
-  loader: () => import('./views/Notifications/Badges'),
-  loading: Loading,
-});
-
-const Modals = Loadable({
-  loader: () => import('./views/Notifications/Modals'),
-  loading: Loading,
-});
-
-const Colors = Loadable({
-  loader: () => import('./views/Theme/Colors'),
-  loading: Loading,
-});
-
-const Typography = Loadable({
-  loader: () => import('./views/Theme/Typography'),
-  loading: Loading,
-});
-
-const Widgets = Loadable({
-  loader: () => import('./views/Widgets/Widgets'),
-  loading: Loading,
-});
-
-const Users = Loadable({
-  loader: () => import('./views/Users/Users'),
-  loading: Loading,
-});
-
-const User = Loadable({
-  loader: () => import('./views/Users/User'),
-  loading: Loading,
-});
-
-
 
 // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
 const routes = [