refactor: code splitting via dynamic import

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,7 +12,7 @@
     "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0",
+    "@coreui/coreui": "^2.0.1",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "^0.1.1",
     "@coreui/react": "^2.0.0-rc.1",
@@ -28,6 +28,7 @@
     "react": "^16.3.2",
     "react-chartjs-2": "^2.7.2",
     "react-dom": "^16.3.2",
+    "react-loadable": "^5.4.0",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.3.2",

src/routes.js

@@ -1,40 +1,178 @@
-import {
+import React from 'react';
-  Alerts,
+import Loadable from 'react-loadable'
-  Badges,
+
-  Breadcrumbs,
-  ButtonDropdowns,
-  ButtonGroups,
-  Buttons,
-  Cards,
-  Carousels,
-  Charts,
-  Collapses,
-  Colors,
-  CoreUIIcons,
-  Dashboard,
-  Dropdowns,
-  Flags,
-  FontAwesome,
-  Forms,
-  Jumbotrons,
-  ListGroups,
-  Modals,
-  Navbars,
-  Navs,
-  Paginations,
-  Popovers,
-  ProgressBar,
-  SimpleLineIcons,
-  BrandButtons,
-  Switches,
-  Tables,
-  Tabs,
-  Tooltips,
-  Typography,
-  Widgets,
-} from './views';
 import DefaultLayout from './containers/DefaultLayout';
 
+function Loading() {
+  return <div>Loading...</div>;
+}
+
+const Breadcrumbs = Loadable({
+  loader: () => import('./views/Base/Breadcrumbs'),
+  loading: Loading,
+});
+
+const Cards = Loadable({
+  loader: () => import('./views/Base/Cards'),
+  loading: Loading,
+});
+
+const Carousels = Loadable({
+  loader: () => import('./views/Base/Carousels'),
+  loading: Loading,
+});
+
+const Collapses = Loadable({
+  loader: () => import('./views/Base/Collapses'),
+  loading: Loading,
+});
+
+const Dropdowns = Loadable({
+  loader: () => import('./views/Base/Dropdowns'),
+  loading: Loading,
+});
+
+const Forms = Loadable({
+  loader: () => import('./views/Base/Forms'),
+  loading: Loading,
+});
+
+const Jumbotrons = Loadable({
+  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/FontAwesome'),
+  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,
+});
+
+
 // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
 const routes = [
   { path: '/', exact: true, name: 'Home', component: DefaultLayout },
@@ -65,7 +203,7 @@ const routes = [
   { path: '/buttons/button-dropdowns', name: 'Button Dropdowns', component: ButtonDropdowns },
   { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
   { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
-  { path: '/icons', exact: true, name: 'Icons', component: Flags },
+  { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
   { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
   { path: '/icons/flags', name: 'Flags', component: Flags },
   { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },

src/scss/style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
  * CoreUI - Open Source Dashboard UI Kit
- * @version v2.0.0
+ * @version v2.0.1
  * @link https://coreui.io
  * Copyright (c) 2018 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://coreui.io/license)