refactor(App.js) code splitting with react-loadable

Author: xidedix

src/App.js

@@ -1,25 +1,50 @@
 import React, { Component } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+// import { renderRoutes } from 'react-router-config';
+import Loadable from 'react-loadable';
 import './App.scss';
 
+const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
+
 // Containers
-import { DefaultLayout } from './containers';
+const DefaultLayout = Loadable({
+  loader: () => import('./containers/DefaultLayout'),
+  loading
+});
+
 // Pages
-import { Login, Page404, Page500, Register } from './views/Pages';
+const Login = Loadable({
+  loader: () => import('./views/Pages/Login'),
+  loading
+});
 
-// import { renderRoutes } from 'react-router-config';
+const Register = Loadable({
+  loader: () => import('./views/Pages/Register'),
+  loading
+});
+
+const Page404 = Loadable({
+  loader: () => import('./views/Pages/Page404'),
+  loading
+});
+
+const Page500 = Loadable({
+  loader: () => import('./views/Pages/Page500'),
+  loading
+});
 
 class App extends Component {
+
   render() {
     return (
       <HashRouter>
-        <Switch>
-          <Route exact path="/login" name="Login Page" component={Login} />
-          <Route exact path="/register" name="Register Page" component={Register} />
-          <Route exact path="/404" name="Page 404" component={Page404} />
-          <Route exact path="/500" name="Page 500" component={Page500} />
-          <Route path="/" name="Home" component={DefaultLayout} />
-        </Switch>
+          <Switch>
+            <Route exact path="/login" name="Login Page" component={Login} />
+            <Route exact path="/register" name="Register Page" component={Register} />
+            <Route exact path="/404" name="Page 404" component={Page404} />
+            <Route exact path="/500" name="Page 500" component={Page500} />
+            <Route path="/" name="Home" component={DefaultLayout} />
+          </Switch>
       </HashRouter>
     );
   }