diff --git a/package-lock.json b/package-lock.json
index 76f743007..e0d6fc4ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12475,6 +12475,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
       "integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg=="
     },
+    "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-pdf": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-2.5.3.tgz",
diff --git a/package.json b/package.json
index 6d038813b..ecc5e2759 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
+    "react-loadable": "^5.5.0",
     "react-pdf": "^2.5.3",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
diff --git a/src/components/App.js b/src/components/App.js
index a1118e526..1409522f3 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -20,7 +20,7 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import configureStore from '../configureStore';
-import Router from './Router';
+import Router from './router';
 
 const store = configureStore();
 
diff --git a/src/components/Router.js b/src/components/Router.js
deleted file mode 100644
index 9a0fc3347..000000000
--- a/src/components/Router.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
-import * as Routes from '../constants/routes';
-import Home from './Home';
-import Login from './Login';
-import ReturnPage from './ReturnPage';
-import LandingPage from './LandingPage';
-import PageNotFound from './PageNotFound';
-import ManageZone from './manageZone';
-import ManageClient from './manageClient';
-import RangeUsePlan from './rangeUsePlan';
-import RupPDFView from './rangeUsePlan/RupPDFView';
-import { getUser } from '../reducers/rootReducer';
-import { isUserAdmin } from '../utils';
-
-/* eslint-disable react/prop-types */
-/* eslint-disable react/prefer-stateless-function */
-
-const PrivateRoute = ({ component: Component, user, ...rest }) => (
-  <Route
-    {...rest}
-    render={(props) => { // props = { match:{...}, history:{...}, location:{...} }
-        if (user) {
-          const { path } = props.match;
-
-          // Admin Routes
-          if (path === Routes.MANAGE_CLIENT || path === Routes.MANAGE_ZONE) {
-            if (isUserAdmin(user)) {
-              return <LandingPage {...props} component={Component} />;
-            }
-            return <Redirect push to={Routes.LOGIN} />;
-          }
-
-          // no need to pass the RupPDFView to LandingPage
-          if (path === Routes.EXPORT_PDF_WITH_PARAM) {
-            return <Component {...props} />;
-          }
-
-          return <LandingPage {...props} component={Component} />;
-        }
-
-        // user is undefined redirect to the login page
-        return <Redirect push to={Routes.LOGIN} />;
-      }
-    }
-  />
-);
-
-const PublicRoute = ({ component: Component, user, ...rest }) => (
-  <Route
-    {...rest}
-    render={(props) => {
-      if (user) {
-        return <Redirect push to={Routes.HOME} />;
-      }
-      return <Component {...props} />;
-    }}
-  />
-);
-
-class Router extends Component {
-  render() {
-    const { user } = this.props;
-    return (
-      <BrowserRouter>
-        <Switch>
-          <PrivateRoute path={Routes.MANAGE_ZONE} component={ManageZone} user={user} />
-          <PrivateRoute path={Routes.MANAGE_CLIENT} component={ManageClient} user={user} />
-
-          <PrivateRoute path={Routes.HOME} component={Home} user={user} />
-          <PrivateRoute path={Routes.RANGE_USE_PLAN_WITH_PARAM} component={RangeUsePlan} user={user} />
-          <PrivateRoute path={Routes.EXPORT_PDF_WITH_PARAM} component={RupPDFView} user={user} />
-          <PublicRoute path={Routes.LOGIN} component={Login} user={user} />
-
-          <Route path="/return-page" component={ReturnPage} />
-          <Route path="/" exact render={() => (<Redirect to={Routes.LOGIN} />)} />
-          <Route path="*" component={PageNotFound} />
-        </Switch>
-      </BrowserRouter>
-    );
-  }
-}
-
-const mapStateToProps = state => (
-  {
-    user: getUser(state),
-  }
-);
-
-export default connect(mapStateToProps, null)(Router);
diff --git a/src/components/router/AsyncComponent.js b/src/components/router/AsyncComponent.js
new file mode 100644
index 000000000..5ac4ca7cd
--- /dev/null
+++ b/src/components/router/AsyncComponent.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+
+/*
+  Code Splitting with React Router
+  https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+*/
+
+const LoadingComponent = ({isLoading, error}) => {
+  if (isLoading) { // Handle the loading state
+    return <div>Loading...</div>;
+  } else if (error) {  // Handle the error state
+    return <div>Sorry, there was a problem loading the page.</div>;
+  } else {
+    return null;
+  }
+};
+
+export const Home = Loadable({
+  loader: () => import('../Home'),
+  loading: LoadingComponent,
+});
+
+export const Login = Loadable({
+  loader: () => import('../Login'),
+  loading: LoadingComponent,
+});
+
+export const ReturnPage = Loadable({
+  loader: () => import('../ReturnPage'),
+  loading: LoadingComponent,
+});
+
+export const PageNotFound = Loadable({
+  loader: () => import('../PageNotFound'),
+  loading: LoadingComponent,
+});
+
+export const ManageZone = Loadable({
+  loader: () => import('../manageZone'),
+  loading: LoadingComponent,
+});
+
+export const ManageClient = Loadable({
+  loader: () => import('../manageClient'),
+  loading: LoadingComponent,
+});
+
+export const RangeUsePlan = Loadable({
+  loader: () => import('../rangeUsePlan'),
+  loading: LoadingComponent,
+});
+
+export const RupPDFView = Loadable({
+  loader: () => import('../rangeUsePlan/RupPDFView'),
+  loading: LoadingComponent,
+});
\ No newline at end of file
diff --git a/src/components/router/PrivateRoute.js b/src/components/router/PrivateRoute.js
new file mode 100644
index 000000000..32d314b3a
--- /dev/null
+++ b/src/components/router/PrivateRoute.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import LandingPage from '../LandingPage';
+import { MANAGE_CLIENT, MANAGE_ZONE, LOGIN, EXPORT_PDF_WITH_PARAM } from '../../constants/routes';
+import { isUserAdmin } from '../../utils';
+
+const PrivateRoute = ({ component: Component, user, ...rest }) => (
+  <Route
+    {...rest}
+    render={(props) => { // props = { match:{...}, history:{...}, location:{...} }
+        if (user) {
+          const { path } = props.match;
+
+          // Admin Routes
+          if (path === MANAGE_CLIENT || path === MANAGE_ZONE) {
+            if (isUserAdmin(user)) {
+              return <LandingPage {...props} component={Component} />;
+            }
+            return <Redirect push to={LOGIN} />;
+          }
+
+          // no need to pass the RupPDFView to LandingPage
+          if (path === EXPORT_PDF_WITH_PARAM) {
+            return <Component {...props} />;
+          }
+
+          return <LandingPage {...props} component={Component} />;
+        }
+
+        // user is undefined redirect to the login page
+        return <Redirect push to={LOGIN} />;
+      }
+    }
+  />
+);
+
+export default PrivateRoute;
diff --git a/src/components/router/PublicRoute.js b/src/components/router/PublicRoute.js
new file mode 100644
index 000000000..6a660f98d
--- /dev/null
+++ b/src/components/router/PublicRoute.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import { HOME } from '../../constants/routes';
+
+const PublicRoute = ({ component: Component, user, ...rest }) => (
+  <Route
+    {...rest}
+    render={(props) => {
+      if (user) {
+        return <Redirect push to={HOME} />;
+      }
+      return <Component {...props} />;
+    }}
+  />
+);
+
+export default PublicRoute;
diff --git a/src/components/router/index.js b/src/components/router/index.js
new file mode 100644
index 000000000..ee734c1ac
--- /dev/null
+++ b/src/components/router/index.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
+import PublicRoute from './PublicRoute';
+import PrivateRoute from './PrivateRoute';
+import { getUser } from '../../reducers/rootReducer';
+import * as Routes from '../../constants/routes';
+import * as AsyncComponents from './AsyncComponent';
+
+class Router extends Component {
+  render() {
+    const { user } = this.props;
+    return (
+      <BrowserRouter>
+        <Switch>
+          <PrivateRoute path={Routes.MANAGE_ZONE} component={AsyncComponents.ManageZone} user={user} />
+          <PrivateRoute path={Routes.MANAGE_CLIENT} component={AsyncComponents.ManageClient} user={user} />
+
+          <PrivateRoute path={Routes.HOME} component={AsyncComponents.Home} user={user} />
+          <PrivateRoute path={Routes.RANGE_USE_PLAN_WITH_PARAM} component={AsyncComponents.RangeUsePlan} user={user} />
+          <PrivateRoute path={Routes.EXPORT_PDF_WITH_PARAM} component={AsyncComponents.RupPDFView} user={user} />
+          <PublicRoute path={Routes.LOGIN} component={AsyncComponents.Login} user={user} />
+
+          <Route path="/return-page" component={AsyncComponents.ReturnPage} />
+          <Route path="/" exact render={() => (<Redirect to={Routes.LOGIN} />)} />
+          <Route component={AsyncComponents.PageNotFound} />
+        </Switch>
+      </BrowserRouter>
+    );
+  }
+}
+
+const mapStateToProps = state => (
+  {
+    user: getUser(state),
+  }
+);
+
+export default connect(mapStateToProps, null)(Router);